我正在学习HTML，CSS和响应式的基础知识。我已经为移动设备设置了@media查询，但是它不起作用。
但是，如果我从桌面（Chrome）打开网站，并尝试调整窗口大小，则它可以工作。
的HTML
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="div1">
<p class="txt">dig</p>
<p class="test">- DIG</p>
<div class="we"></div>
</div>
<div class="div2">
<p class="txt">dig</p>
<p class="test">Magni</p>
<div class="we"></div>
</div>
<div class="div3">
<p class="txt">dig</p>
<p class="test">Grillo</p>
<div class="we"></div>
</div>
</body>
</html>
的CSS
body {
margin: 0px;
}
.div1 {
height: 100%;
width: 33.3%;
background-color: darkgrey;
float:left;
}
/*.we {
height: 200px;
width: 50%;
background-color: lightcoral;
margin-left: 165px;
}*/
.div2 {
height: 100%;
width: 33.3%;
background-color: darkslategray;
float:left;
}
.div3 {
height: 100%;
width: 33.3%;
background-color: darkorange;
float:left;
}
.txt {
text-align: center;
color: black;
font-size: 100;
padding-top: 50%;
}
.test {
text-align: center;
font-size: 50;
color: antiquewhite;
}
/* - - - - - - - - - - - - - - - - - - - */
@media screen
and (max-width: 320px)
and (orientation: portrait) {
body {
margin: 0px;
}
.div1 {
height: 500px;
width: 100%;
background-color: darkgrey;
}
.div2 {
height: 500px;
width: 100%;
background-color: darkslategrey;
}
.div3 {
height: 500px;
width: 100%;
background-color: darkorange;
}
.txt {
text-align: center;
color: black;
font-size: 50;
padding-top: 25%;
}
.test {
text-align: center;
font-size: 25;
color: antiquewhite;
}
}
如果要测试，可以继续：sinh.altervista.org
我该如何解决？每个设备的真正媒体查询是什么？在网上，我发现了很多不同的@media查询。
您必须指定如何在meta标签viewport内使用head标签呈现文档。
例如：
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=3, user-scalable=yes, minimal-ui">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
注意：上面的示例是详尽无遗的，在您的情况下<meta name="viewport" content="width=device-width, initial-scale=1">就足够了，但是如果您要管理缩放，用户缩放等，可以添加这些属性。
width=device-width 做：
这意味着浏览器将（可能）以其自身屏幕的宽度呈现页面的宽度。
取自此处：https : //css-tricks.com/snippets/html/sensitive-meta-tag/
并将initial-scale=1缩放比例保持为1
在W3C的草案中，以下是content您可以使用的属性的属性：https : //drafts.csswg.org/css-device-adapt/#meta-properties。
还有来自MDN的更多文档：https : //developer.mozilla.org/en/docs/Mozilla/Mobile/Viewport_meta_tag
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句