Question

我的显示器分辨率为1024 * 768。

根据分辨率，我在CSS中设置媒体以缩放HTML。

最后我的网页背景色为红色，但我的最大分辨率高度为 768px 。为什么它被（最大高度：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

您的媒体查询max-width 768px被重写为1280px

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

4 个答案: