Question

我不明白为什么这个媒体查询不起作用。

如果屏幕宽度为480px，我想应用一些代码。在这种情况下，我正在使用：

@media screen  and (width: 480px) {
}

但没有任何反应。我尝试使用

@media screen  and (max-width: 481px) and  (min-width: 479px) {

仍然无法正常工作它仅适用于@media screen and (max-width: 481px)，但另一端是怎么回事？

Answer 1

试试这个，你在规则中指定屏幕，如果你试图访问另一个它不起作用：

编辑：该片段有填充和边距所以测试507px或尝试我的小提琴480px：http://jsfiddle.net/46u4kggq/1

请勿使用Chrome响应工具进行尝试，因为代码段上没有视口

＆＃13;

body{
  background: black;
}

@media (width: 480px){
  body{
    background: yellow;
   }
}

＆＃13;

<body>
</body>

＆＃13;

Answer 2

尝试使用jquery，在css媒体查询中，您无法定位精确的宽度，只能使用最大宽度和最小宽度。

$(document).ready(function(){
 function checkWidth() 
 { 
   var windowSize = $(window).width(); 
   if (windowSize == 480) 
   { 
        console.log("screen width is equal t0 480"); 
    }
 } // Execute on load checkWidth(); // Bind event listener 
 $(window).resize(checkWidth);

}）;

CSS媒体查询无法正常工作

2 个答案: