-2

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

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

当宽度在 481px 和 1024px 之间时为真。但是当我有width:70em给定的正文时，当我缩小浏览器的宽度时，内容不会被调整。

如果我现在稍微改变一下并将正文中的宽度设置为 80%，那么当浏览器的宽度变小时内容会自动变小。

在我看来，当浏览器例如在 481px 和 1024px 之间时，不可能同时捕捉到当浏览器宽度变小时内容能够变小。

所以我的问题是，如果浏览器的宽度在 481px 和 1024px 之间时，是否可以同时调整内容，当浏览器的宽度自动调整时

4

1 回答 1

0

您将宽度设置为 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

于 2013-09-10T23:46:22.683 回答