寬度通過什么：320px

Question

我對320px寬度的媒體查詢有問題。在一般的CSS中，對於標准Web分辨率，我有以下問題：

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;
    }

}

我也有另一個媒體查詢，用於Web和移動屏幕分辨率

@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;
}

}

然后，字體大小將在常規屏幕（320px以上的任何屏幕）上顯示為1em。

Answer 2

這將適用於320px以下的樣式

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

Answer 3

(min-width: 320px)是指每分辨率比在320像素更大的 width 。

如果您只希望320像素或更小的屏幕接收這些規則，則需要使用(max-width: SIZE) ，其中SIZE是您希望將其應用到的最大屏幕。