CSS 媒体查询忽略优先顺序

Question

很简单，我有一个 CSS 应该适用于 <body>，但不适用。

@media only screen
  and (min-device-width: 320px) 
  and (max-device-width: 600px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: portrait){
    body{
        margin-left: 5px;
        margin-right: 5px;
    }
}

body {
    margin: 0 0 0 0;
    background-color: #212121;
}

按照我用的顺序

Answer 1

您的代码没有任何问题，只是您的顺序有问题。在响应式网页设计中，您应该使用 "mobile-first" CSS。这意味着您的媒体查询应该在您的默认 css:

之后

body {
margin: 0 0 0 0;
background-color: #212121;
}

  @media only screen
  and (min-device-width: 320px) 
  and (max-device-width: 600px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: portrait){
    body{
    margin-left: 5px;
    margin-right: 5px;

    }
}

Answer 2

您的 CSS 实际上已正确应用。

在CSS中，如果两个规则具有相同的来源、权重和特异性，则最后声明的规则将覆盖前一个规则。因此，在您的情况下，margin-left: 5px; 和 margin-right: 5px; 正在应用，但它们立即被 margin: 0 0 0 0; 覆盖。

因此，您只需更改顺序即可。像这样：

body {
    margin: 0 0 0 0;
    background-color: #212121;
}
@media only screen
  and (min-device-width: 320px) 
  and (max-device-width: 600px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: portrait){
    body{
        margin-left: 5px;
        margin-right: 5px;
    }
}

CSS 媒体查询忽略优先顺序

CSS media queries ignores order of preference

css

media-queries