Question

使用twitter bootstrap我已应用

 @media only screen and (min-width : 768px){

 }

但是这个媒体查询也在处理所有其他宽度值，例如992px＆amp; 1200像素。

任何解决方案？

Answer 1

1）请检查您是否已将元标记包含在HTML文档的head部分中

<meta name="viewport" content="width=device-width, initial-scale=1.0">

如果此行不存在，那么您的媒体查询都不起作用。

2）如果您在样式表中覆盖bootstrap断点，请确保样式表正确链接到您的应用程序。

3）了解min-width和max-width的工作原理将对您有所帮助。如果你正在尝试一些错误的组合，结果可能很奇怪:)

@media (min-width:480px) {}

此媒体查询中的样式仅在您的视口最小为480px或更宽时才适用。

@media (max-width:767px){}

此媒体查询中的样式仅适用于您的视口，最高可达767px。对于任何高于767px的分辨率，我们的样式都不会被应用。

@media screen

这表示此特定样式仅适用于屏幕，不适用于打印，投影或手持设备。所以@media屏幕或@media only屏幕不会对您的媒体查询造成太大损害。

这些是我解决媒体查询问题的一些提示。希望这可以帮助您解决问题。

Answer 2

将媒体查询更改为

@media screen and (min-width: 768px) and (max-width: 900px) {

}

或者你想要的任何尺寸。

有关详细信息，请参阅This link。

Answer 3

您可以使用max-width。当屏幕调节最大992px时，它将起作用。

 @media only screen and (max-width : 992px){
       /*your styles for Tab device*/
 }

您可以使用max-width。当屏幕调节最大767px时，它将起作用。

@media only screen and (max-width : 767px){
       /*your styles for mobile device*/
 }

Answer 4

现在就开始工作了。移动设备最大只有部件从1200到1200以上是读取默认值。

@media (max-width: 640px) {

}
@media (min-width:640px) and (max-width: 768px) {

}

@media (min-width: 768px) and (max-width:992px){

}

@media (min-width: 992px) and (max-width:1200px) {

}

Answer 5

我希望这对你有用请在style.css中定义它而不是在bootstrap中

@media (min-width:768px)
{
}

bootstrap Media Query无法正常工作

5 个答案: