html - 媒体查询不起作用

Question

有谁知道为什么我的媒体查询代码不起作用？

 <div class="box"></div> 

 .box {
     background-color: red;
     width: 100%;
     height: 50px;
 } 

 @media only screen and (max-device-width: 768px)  {
     .box {border: 5px solid blue;}
 }

http://jsfiddle.net/N9mYU/

Answer 1

您将使用 (max-width: 768px) 而不是 (max-device-width: 768px)。查看 max-device-width/max-width 之间的区别说明 here .

如果您希望媒体查询在移动设备上运行，请添加视口(viewport):

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

UPDATED EXAMPLE HERE

@media only screen and (max-width: 768px) {
    .box {
        border: 5px solid blue;
    }
}

进一步阅读:A pixel is not a pixel/Viewport width and screen width (mdn)