Question

这是一个例子。例如，如果我将body设置为70em，然后调整浏览器宽度此规则

@media only screen and (min-width: 481px) and (max-width: 1024px)
{
    body
    {      
        background : #B0E0E6 url(img/bg.jpg) no-repeat;
    }
}

当宽度介于481px和1024px之间时，

为true。但是当我将width:70em添加到正文中时，当我使浏览器的宽度变小时，内容不会被调整。

如果我现在稍微更改并将正文中的宽度设置为80％，则当浏览器的宽度较小时，内容会自动变小。

在我看来，当浏览器处于481px和1024px之间时，两者都无法捕获，同时当浏览器宽度变小时，内容可以更小。

所以我的问题是，当浏览器的宽度介于481px和1024px之间时，是否能够捕获并且同时调整内容在浏览器的宽度时自动调整

Answer 1

您将宽度设置为70em。这是一个固定的宽度（或多或少考虑它是基于字体大小）。在媒体查询中，您不会在任何位置设置宽度。你只需设置背景。您需要在媒体查询中调整要调整大小的对象的宽度。所以，如果你有

body{
   width:70em;
}

@media only screen and (min-width: 481px) and (max-width: 1024px)
{
    body
    {      
        background : #B0E0E6 url(img/bg.jpg) no-repeat;
        width: 50em;
    }
}

这会根据您指定的媒体查询调整正文大小。此外，您可能希望查找CSS单元以确保您要使用em（因为根据您的描述，％可能适合您的需要）：http://www.w3schools.com/cssref/css_units.asp

是否可以捕获浏览器宽度，并在浏览器变小时仍然调整内容

1 个答案: