html - CSS 媒体和查询不起作用？

Question

这是我在 header.html 文件中的 CSS 媒体查询代码。我在 html 文件中编写 css 媒体查询。

<style type="text/css">

@media (min-width:100px ) and (max-width:480px ){
    .background-color-sec-1-images {
        background-image: url("localhost/set/img/img1.jpg");
        background-repeat:no-repeat; 
        background-size:100% 100%;
    }        
}
@media (min-width:480px ) and (max-width:768px ){
    .background-color-sec-1-images {
        background-image: url("localhost/set/img/img1.jpg");
        background-repeat:no-repeat; 
        background-size:100% 100%;
    }        
}
@media (min-width:768px ) and (max-width:1200px ){
    .background-color-sec-1-images {
        background-image: url("localhost/set/img/img1.jpg");
        background-repeat:no-repeat; 
        background-size:100% 100%;
    }        
}      
</style>

此 CSS 无效。

当我像这样编写 css 时工作正常。

    <style type="text/css">

@media (min-width:100px ){
    .background-color-sec-1-images {
        background-image: url("localhost/set/img/img1.jpg");
        background-repeat:no-repeat; 
        background-size:100% 100%;
    }        
}
@media (min-width:480px ){
    .background-color-sec-1-images {
        background-image: url("localhost/set/img/img1.jpg");
        background-repeat:no-repeat; 
        background-size:100% 100%;
    }        
}
@media (min-width:768px ){
    .background-color-sec-1-images {
        background-image: url("localhost/set/img/img1.jpg");
        background-repeat:no-repeat; 
        background-size:100% 100%;
    }        
}      
</style>

但这是覆盖 css。所以这对我不起作用。

但为什么不使用 @media (min-width:100px) 和 (max-width:400px) 查询呢？

谢谢。

Answer 1

编辑:在纯 css 中，您必须声明您的媒体并在 INSIDE 中放置您的条件。

@media print { // rule (1)
  #anId{ 
    //something here
   }
  @media (max-width: 12cm) { // rule (2)
    //something here
  }
}

here docs

所以您的第一个规则可以是:

@media screen{
  @media (min-width:100px ) and (max-width:480px ){
    .background-color-sec-1-images {
        background-image: url("localhost/set/img/img1.jpg");
        background-repeat:no-repeat; 
        background-size:100% 100%;
    }        
  }
}