我现在正在做一个移动网站，并尝试使用 CSS3 媒体查询针对不同的设备。我的部分代码如下:
@media screen and (max-width:320px) {
body {
width: 320px;
}
/* some other style */
}
如您所见，我必须明确设置正文宽度，以确保它不会显示我在普通 css 中为桌面设置的宽度，即 920 像素。我想知道是否有任何方法可以将 body 宽度自动设置为设备宽度，并且我不需要每次创建新的 @media 时都手动设置它。
顺便说一下，我还在我的 head 标签中添加了以下代码:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
最佳答案
你也可以使用
width: 100vw;
这会将元素设置为视口(viewport)宽度的 100%。 在添加之前，您可能需要检查浏览器的兼容性: http://caniuse.com/#search=vw
有关视口(viewport)大小的更多信息: https://css-tricks.com/viewport-sized-typography/
关于css - 如何在 CSS3 媒体查询中使主体宽度自动等于设备宽度？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/15095833/