為什么@media被覆蓋，即使我的最大高度是768px而不是1280px？

Question

我的顯示器分辨率為1024 * 768。

根據分辨率，我在CSS中設置媒體以縮放HTML。

最后我的網頁背景顏色是紅色，但我的最大分辨率高度是768px 。 為什么被（max-height：1280px）覆蓋？

如果我想縮放網絡，我需要做什么取決於分辨率？

這是我的CSS文件：

@media (max-height: 768px) {
    html {
        zoom: 100%;
        background-color: green;   
    }
}

@media (max-height: 1280px) {  
    html {
        zoom: 125%;
        background-color: red;
    }
}

@media (max-height: 1080px) {
    .html {
        zoom: 110%;
        background-color: yellow;
    }
}

body {   
    height: 100%;   
    position: fixed;   
    width: 100%;   
    user-select: none;   
    -webkit-user-select: none; 
}

 ......

Answer 1

因為max意味着它所說的。 凡是這樣的高度適合內將匹配規則。 如果我有10件物品或7件物品，我可以去超市的12件或更少的結賬。

在其他條件相同的情況下，將應用最后一條規則。

將768px規則放在最后，以便覆蓋之前的規則。

Answer 2

你可以做

@media (max-height: 768px) {
// Code Here
}
@media (min-height: 769px) and (max-height: 1080px) {
// Code Here
}
@media (min-height: 1081px){
// Code Here
}

http://www.w3schools.com/cssref/css3_pr_mediaquery.asp

Answer 3

@media (max-height: Xpx)適用於顯示器高度≤Xpx的所有內容。

因此，如果您首先運行@media (max-height: 768px)然后運行@media (max-height: 1280px) ，則當您的顯示區域的高度≤1280px時，這兩者都是預期的行為。

我想你會這樣做：

@media (max-height: 768px) {
    html {
        zoom: 100%;
        background-color: green;   
    }
}

@media (min-height: 1081px) and (max-height: 1280px) {  
    html {
        zoom: 125%;
        background-color: red;
    }
}

@media (min-height: 769px) and (max-height: 1080px) {
    .html {
        zoom: 110%;
        background-color: yellow;
    }
}

body {   
    height: 100%;   
    position: fixed;   
    width: 100%;   
    user-select: none;   
    -webkit-user-select: none; 
}

 ......

Answer 4

您的最大寬度為768px的媒體查詢將被1280px覆蓋