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

Answer 2

您必须声明您正在使用的媒体：

http://www.w3schools.com/css/css_mediatypes.asp

所以在你的情况下使用如下：

@media screen (min-width:100px ) {
/* your styling goes here */
}

CSS媒体和查询不起作用？

2 个答案: