时间戳

首页 > 解决方案 > 我的网页中的媒体查询在 Firefox、IE 和 Edge 浏览器中不起作用

html - 我的网页中的媒体查询在 Firefox、IE 和 Edge 浏览器中不起作用

问题描述

我试图将图像放置在前一个 div 上（在其顶部），前一个 div 的位置是相对的，并且这个 img 标签具有绝对位置，因为我为所有设备编写了媒体查询，以便在不同尺寸上正确定位图像。现在我的问题是媒体查询不适用于 IE、Edge 浏览器和 Mozilla Firefox。我的图像在这些浏览器中完全消失了。我的代码：

<div class="temp">
</div>

    <img src="" class="img img-responsive tit">

我的CSS是

    .temp{
        padding-top: 4rem;
        background-image: url('../img/BG.jpg');
        background-size: cover;
        width:100%;
        height: 45rem;
        position: relative;
        opacity: 0.7;
        background-repeat: no-repeat;
        z-index: -1;
    }
    @media only screen
    and (min-device-width : 320px)
    and (max-device-width : 480px) {

    .temp{
        height: 30rem;
    }
    .tit{
        content: url("../img/Title_Landscape.png");
        position: absolute;
        top: 10rem;
        width: 100%;
    }

}
    @media only screen
    and (min-device-width : 768px)
    and (max-device-width : 1024px) {

    .tit{
        content: url("../img/Title_Landscape.png");
        position: absolute;
        top: 8rem;
        width: 100%;
    }   
    .temp{
        height: 40rem;
    }
}
    @media only screen
    and (min-width : 1224px){
        .tit{
        content: url("../img/Title_Landscape.png");
        position: absolute;
        top: -1rem;
        width: 100%;
    }       
    }

标签： htmlcssmedia-queries

解决方案

几个潜在的问题：

  1. img src失踪。按照标准语法将imgurl 从 CSS移动content:到实际的 HTML 。属性保留给伪元素。请参阅此 MDN 条目以供参考。imgcontent:::after::before
  2. device-widthvswidth：您可能希望width用于媒体查询，尤其是在您的桌面设备上进行测试时。请参阅此 SitePoint 文章以供参考。
  3. 缺少宽度范围：您的媒体查询处理320px-480px、768px-1024px和>1224px范围，并跳过所有其他可能的像素尺寸。当视口大小在这些范围内时，浏览器将没有样式可供选择。你可能想要
    • 在媒体查询之外应用全局样式，
    • 提供所有可能的范围，或
    • 仅使用min-或max-宽度，因此没有缺失范围。

不知道您的意图是什么，以及整个页面是如何配置的，我无法提供进一步的指示。请参阅https://codepen.io/baadaa/pen/RwNdpvo快速查看。

推荐阅读