21

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

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

如您所见，我必须明确设置正文宽度，以确保它不会显示我在普通 css 中为桌面设置的宽度，即 920 像素。我想知道是否有任何方法可以将主体宽度自动设置为设备宽度，并且每次创建新的@media.

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

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

2 回答 2

40

你也可以使用

width: 100vw;

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

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

于 2015-05-04T21:06:15.507 回答
26

只需使用width: auto;

width: 100%;和之间的区别在于width: auto;100% 的外部宽度是100% + padding-left + padding-right, 内部100%。width: autois的外部宽度100%，内部宽度是100% - padding-left - padding-right当且仅当displayisblock和 nofloat被设置（并且之前没有没有 clear 的浮动元素）。

于 2013-02-26T17:55:03.917 回答