Question

我在320px宽度的媒体查询中遇到问题..在我的标准网络分辨率的一般css中我有这个：

body {
    background-image:url(../Images/FondoSL.png);
    font-family: 'Open Sans', sans-serif;
    font-size:1em;
}

.headerPartOne p{
    font-size:0.94em;
    color:#676767;
    margin-left:30px;
    margin-top:5px;
    margin-bottom:0;
}

.contentContentPage fieldset ul li span {
    font-style:italic;
    font-size:0.98em;
    margin-left:35px;
}

并在媒体查询320px中：

@media only screen and (min-width: 320px) {

    body {
        font-size:0.7em;
    }

    .headerPartOne p{
        font-size:0.74em;
        color:#676767;
    }

    .contentContentPage fieldset ul li span {
        font-style:italic;
        font-size:0.48em;
    }

}

我还有另一个媒体查询网页和手机屏幕分辨率

@media only screen and (min-width: 600px) and (max-width: 800px)
@media only screen and (min-width: 533px) and (max-width: 853px)
@media only screen and (min-width:1920px)

这些媒体查询工作正常。

好吧我的问题是查询320px的样式应用于所有分辨率，这意味着如果我运行查询到更大的平均分辨率保持320px媒体查询中的样式..为什么会这样？与其他查询我感觉不一样，每个都适用我想要的风格。（如果我没有放入320px媒体查询）

对不起我的英文..谢谢

Answer 1

让我们以这一个css规则为例。

让我们记住，CSS代表层叠样式表。因此，工作表底部的规则会覆盖之前的任何规则。

所以，如果你有

body { 
    font-size: 1em;
}

在你的CSS样式表的第25行。

并且

@media only screen and (min-width: 320px) {

body {
    font-size:0.7em;
}

}

在你的CSS样式表第114行。

字体大小为0.7em，因为它覆盖了以前的样式。

让我们说，而不是@media查询，而是

@media only screen and (max-width: 320px)  { /* notice the max-width instead of min-width */

body {
    font-size:0.7em;
}

}

然后，字体大小将在常规屏幕上显示为1em（任何高于320px的屏幕）。

Answer 2

这适用于320px以下的样式

@media (max-width:320px) {
  /* styles here */
}

Answer 3

(min-width: 320px)表示width中的每个分辨率大于 320px。

如果您只想要 320px 或更低的屏幕来接收这些规则，则需要使用(max-width: SIZE)，其中SIZE是您想要的最大屏幕适用于。

传递宽度：320px

3 个答案: