响应式媒体查询不起作用答案

【问题标题】：responsive media query not working响应式媒体查询不起作用
【发布时间】：2014-02-03 21:58:35
【问题描述】：

如果这个问题之前已经发布过，但我找不到答案，我真的很抱歉，我为两个版本的设备 tablet 和 PC 编写了一个非常简单的 css 文件，但它不起作用。现在你可以看到我正在尝试在分辨率 x 和 y 之间使用，但似乎根本不起作用。请问有什么帮助吗？谢谢

/* Responsive tablet etc
-------------------------------------------------------------------------------*/

@media only screen and (min-device-width: 320px) and (max-device-width: 680px) {

#menubar {
    width:100%;
    height:100px;
    display:block;
    position:relative;
    background-color:#000;
    margin:auto;
    padding:0px;
    z-index:100;
}

#menubarwrap {
    width:980px;
    height:95px;
    margin:auto;
    padding:0px;
    display:block;
    position:relative;
}

#logo {
    display:inline-block;
    position:relative;
    margin:auto;
    padding:0px;
    width:100px;
    height:95px;
    background-image:url(../img/logo.png);
    background-repeat:no-repeat;
}

/* Master MENU */

#rightmenu {
    display:inline-block;
    position:relative;
    height:95px;
    width:auto;
    margin:auto;
    padding:0px;
}

/* Full image */

#banner {
    background-image:url(../img/banner.jpg);
    -webkit-background-size: cover;
    -moz-background-size: cover;
   -o-background-size: cover;
    background-size: cover;
    width:100%;
    height:500px;
    display:block;
    position:relative;
    margin:auto;
    padding:0px;
}


/*wrapper*/

#wrapper {
    display:block;
    position:relative;
    height:auto;
    width:480px;
    margin:auto 10px auto 10px;
    padding:5px;
}


<!-- media tablet end-->
}

/* Desktop!
-------------------------------------------------------------------------------*/
@media only screen and (min-device-width: 681px) and (max-device-width: 1600px) {

#menubar {
    width:100%;
    height:100px;
    display:block;
    position:relative;
    background-color:#000;
    margin:auto;
    padding:0px;
    z-index:100;
}

#menubarwrap {
    width:980px;
    height:95px;
    margin:auto;
    padding:0px;
    display:block;
    position:relative;
}

#logo {
    display:inline-block;
    position:relative;
    margin:auto;
    padding:0px;
    width:150px;
    height:95px;
    background-image:url(../img/logo.png);
    background-repeat:no-repeat;
}

/* Master MENU */

#rightmenu {
    display:inline-block;
    position:relative;
    height:95px;
    width:auto;
    margin:auto;
    padding:0px;
}

/* Full image */

#banner {
    background-image:url(../img/banner.jpg);
    -webkit-background-size: cover;
    -moz-background-size: cover;
   -o-background-size: cover;
    background-size: cover;
    width:100%;
    height:500px;
    display:block;
    position:relative;
    margin:auto;
    padding:0px;
}


/*wrapper*/

#wrapper {
    display:block;
    position:relative;
    height:auto;
    width:990px;
    margin:auto 10px auto 10px;
    padding:5px;
}


<!-- media PC end-->
}

【问题讨论】：

标签： html css responsive-design

【解决方案1】：

而不是使用min-device-width 和max-device-width
请改用min-width 和max-width

【讨论】：

你为什么要这样做？ min-device-width 和 max-device-width 是合法且受支持的值。
我假设@Anando 正在调整他的浏览器大小并且想知道为什么 CSS 没有得到正确应用。 min-device-width 和 max-device-width 不会在浏览器调整大小时改变。
不，实际上它完全停止读取 css。我只得到 html 数据..是的，很奇怪。
我将我的代码更改为 (at sign)media screen 和 (max-width:532px) for desktop to (at sign)media screen and (min-width:533 px) ，现在是最大宽度正在工作......但不是最小宽度:(。我可以编写一个 jquery 来根据浏览器宽度选择一个单独的样式表，但我只是认为这会更干净。

【解决方案2】：

你添加了吗：

<meta name="viewport" content="width=device-width">

在你的 html 的头部？

【讨论】：

您的桌面 CSS 代码与移动设备的代码是否位于单独的文件中？