媒体查询不起作用 [英] Media queries doesn't work

问题描述

有人知道为什么我的媒体查询代码不起作用吗?

Does anyone know why my media queries code doesn't work ?

 <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/

推荐答案

您将使用(max-width: 768px)而不是(max-device-width: 768px).请参阅max-device-width/max-width之间的差异，该解释说明

You would use (max-width: 768px) instead of (max-device-width: 768px). See the difference between max-device-width/max-width explained here.

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

Add a viewport if you want the media query to work on mobile devices:

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

此处更新了示例

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

进一步阅读:像素不是像素/视口的宽度和屏幕宽度(mdn)

这篇关于媒体查询不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！