Question

您好我正在为网站实施响应式设计。虽然这个设计在firefox中运行得很好，但它既不在PC上也不在手机上。样式表styles-RWD.css就是这个

    /*CSS FOR MOBILE DEVICES*/

@media screen and (min-width: 0px) and (max-width: 480px) {

 #sidebar {
  display : none;
 }

 footer {
  display : none;
 }
#bann_cb {
  display : none;
 }

body {
width:auto;
background-color:white;
font-family: sans-serif;
color:orange;
margin:0px 2px 2px 2px;
padding:0;
}
#header {
display : none;
}

#content {
width:50%;
padding:0px 2px 2px 2px;
}
#box_bharat {
display:none;
}

#form {
width:auto;
padding:none;

}
#menu-bar {
width:auto;
}

#news_10 {
display:none;
}
#mob_heading {
display:block;
width:auto;
visibility:visible;
}

}
/*end css for mobile devices*/

默认样式是在此之后。

index.php有这些行

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" type="text/css" href="styles-rwd.css" />

现在这可以在firefox中使用，但不能在chrome中使用。在铬合金中它甚至没有触发。我在电脑上测试过。当我减小firefox浏览器窗口的大小时，会触发布局。但铬不会发生这种情况。移动设备也是如此。请帮助。

Answer 1

Chrome模拟器总是尝试渲染并缩小946px页面，使其成为模拟的任何大小的屏幕.Viewport标记告诉浏览器应该如何尝试呈现页面。 width = device-width以您期望的方式运行，而width = 100px可以扩展所有内容。

要解决此问题，请在

部分的元标记下方插入

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

Answer 2

// media screen only supports max-width 
@media screen and (max-width: 480px) {

}

Answer 3

对于任何像我即将中风一样卡住的人，请确保您没有混合元标记，您必须只使用一个。

我不小心在我的标题中组合了这两个标签：

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

删除第二个元标记似乎解决了我在 chrome 中无法使用 @media 查询的问题。

媒体查询无法使用chrome

3 个答案: