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

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-rightif且仅当displayis block和no float设置(并且之前没有明确的浮动元素).