CSS 媒体和查询不起作用？答案

【问题标题】：CSS media and query not working?CSS 媒体和查询不起作用？
【发布时间】：2023-03-09 09:28:01
【问题描述】：

这是我在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) 查询不起作用？

谢谢。

【问题讨论】：

试试min-width:481px ，第二个和第三个试试min-width:769px 。
我尽量不工作，谢谢。
您是否尝试将http:// 添加到您的路径中？
CSS 看起来不错jsfiddle.net/8V3L7，背景图片正在为我换掉。您确定是导致问题的媒体查询吗？您能否为此提供更多背景信息？
@Serlite 我提到我在 html 页面中编写 css 以致无法正常工作？

标签： html css media-queries

【解决方案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%;
    }        
  }
}

【讨论】：

【解决方案2】：

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

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

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

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

【讨论】：