Question

我现在正在做一个移动网站，并尝试使用CSS3媒体查询定位不同的设备。我的部分代码如下：

@media screen and (max-width:320px) {
body {
    width: 320px;
}
/* some other style */  
}

正如您所看到的，我必须明确设置主体宽度，以确保它不显示我在普通css中为桌面设置的宽度，即920px。我想知道是否有任何方法可以自动将体宽设置为设备宽度，每次创建新@media时我都不需要手动设置。

顺便说一下，我还在head标记中添加了以下代码：

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

Answer 1

您也可以使用

width: 100vw;

这会将元素设置为视口宽度的100％。在添加之前，您可能需要检查浏览器的兼容性： http://caniuse.com/#search=vw

有关视口大小调整的更多信息： https://css-tricks.com/viewport-sized-typography/

Answer 2

只需使用width: auto;

即可

width: 100%;和width: auto;之间的区别在于，100％的外部宽度为100% + padding-left + padding-right，内部100%。 width: auto的外部宽度为100%，内部宽度为100% - padding-left - padding-right当且仅当display为block并且未设置float时（且不之前没有明确的浮动元素。）

如何在CSS3媒体查询中自动使体宽等于设备宽度？

2 个答案: