Question

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

@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;覆盖。

所以你要做的就是改变秩序。像这样：

＆＃13;

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

＆＃13;

Answer 2

您的代码没有任何问题，只是您的订购。在响应式网页设计中，您应该使用"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;

    }
}

CSS媒体查询忽略了首选顺序

2 个答案: