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

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

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

Answer 2

您的代码没有错，只是您的订购。 在自适应Web设计中，应使用"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;

    }
}