html - Bootstrap 媒体查询不起作用

Question

我应用了 Twitter Bootstrap

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

 }

但此媒体查询也适用于所有其他宽度值，例如 992px 和 1200px。

有什么解决办法吗？

Answer 1

1)请检查您是否在 HTML 文档的 header 部分包含了 meta 标记作为

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

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

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

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

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

仅当您的视口(viewport)最小为 480 像素或更宽时，此媒体查询中的样式才会适用。

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

此媒体查询中的样式最多只能应用到 767 像素的视口(viewport)。对于任何高于 767 像素的分辨率，我们的样式都不会应用。

@media screen 

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

这些是我解决媒体查询问题的一些技巧。希望这能帮助您解决问题。