Dan*_*iel 5 html css twitter-bootstrap
随着twitter bootstrap我应用
@media only screen and (min-width : 768px){
}
但是这个媒体查询也在处理所有其他宽度值,例如992px和1200px.
有解决方案吗
小智 11
1)请检查是否已将元标记包含在HTML文档的head部分中
<meta name="viewport" content="width=device-width, initial-scale=1.0">
如果此行不存在,那么您的媒体查询都不起作用.
2)如果在样式表中覆盖bootstrap断点,请确保样式表正确链接到应用程序.
3)了解最小宽度和最大宽度的工作原理将对您有所帮助.如果你正在尝试一些错误的组合,结果可能很奇怪:)
@media (min-width:480px) {}
仅当视口的最小值为480px或更宽时,此媒体查询中的样式才适用.
@media (max-width:767px){}
此媒体查询中的样式仅适用于您的视口,最高可达767px.对于任何高于767px的分辨率,我们的样式将不适用.
@media screen
这表明此特定样式仅适用于屏幕,不适用于打印,投影或手持设备.因此@media屏幕或@media only屏幕不会对您的媒体查询造成太大损害.
这些是我解决媒体查询问题的一些技巧.希望这可以帮助您解决问题.
将媒体查询更改为
@media screen and (min-width: 768px) and (max-width: 900px) {
}
或者你想要的任何尺寸.
有关详细信息,请参阅此链接.