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

问题描述

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

I'm doing a mobile website now and trying to target different devices using CSS3 media queries. Part of my code is as follows:

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

正如你可以看到，我必须明确设置body宽度，以确保它不显示我在桌面设置的宽度在我的正常CSS，这是920px。我想知道是否有任何方式，身体宽度可以自动设置为设备宽度，我不需要手动设置每次我创建一个新的 @media

As you can see, I have to set the body width explicitly to make sure it doesn't show the width I set for desktop in my normal css, which is 920px. I'm wondering if there is any way that the body width can be set automatically to the device width and I don't need to set this manually every time I create a new @media.

顺便说一下，我还在头标签中添加以下代码：

By the way, I also add the following code inside my head tag:

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

推荐答案

只需使用 width：auto ;

width：100％; 和 width：auto; 是100％的外部宽度是 100％+ padding-left + padding-right ，inner 100％。外部宽度 width：auto 为 100％，内部宽度为 100％ left-padding-right 当且仅当显示为 $ c> float 设置（没有浮动的元素，没有clear是之前）。

Difference between width: 100%; and width: auto; is that outer width for 100% is 100% + padding-left + padding-right, inner 100%. Outer width of width: auto is 100%, inner width is 100% - padding-left - padding-right if and only if display is block and no float is set (and no floated element without clear is before).

这篇关于如何使CSS3媒体查询中的主体宽度等于设备宽度自动？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！