时间戳

首页 > 解决方案 > Internet Explorer 中的媒体查询问题

html - Internet Explorer 中的媒体查询问题

问题描述

我经常看到这个问题被问到，我尝试了所有可能的方法，但我的自定义媒体查询不起作用，如果屏幕尺寸大于 768 像素，它总是选择跟随媒体查询。

@media all and (min-width:768px){
//further code here
}

我尝试添加以下元标记，但没有找到运气。

<meta http-equiv="X-UA-Compatible" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no,IE=edge,chrome=1"> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /> 
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">

我正在以以下方式编写媒体查询

@media all and (min-width:768px){
//further code here
}
@media all and (min-width:768px) and (max-width:1024px){
//further code here
}
@media all and (min-width:1025px) and (max-width:1440px){
//Further code here
}
@media all and (min-width:1441px) and (max-width:2560px){
//Further Code here
}

//Working Code of Media Query for my Screen Size
@media all (max-width:1440px){
  .border-center{
  background-image: url(../img/ms-border-to-centerp.png);
  background-size: contain;
  background-repeat: no-repeat;
  height:155px;
}
.searched-border-center{
  background-image: url(../img/ms-border-to-centerp.png);
  background-size: contain;
  background-repeat: no-repeat;
  height:183px;
}
.mosquePage{
  background-image: url(../img/ms-border-to-centerp.png);
  background-size: contain;
  background-repeat: no-repeat;
  height:183px;
}
#flipbook{
position: absolute;
    margin: auto;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}
#flipbook1{
position: absolute;
    margin: auto;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}
  .compass_container {
    left: -34% !important;
    top: -34% !important;
    transform: scale(0.8) !important;
}
    
    .mainCompass{
        /*left:-45px; */
    }
    .compass__rose{
    height:250px !important;
    }
    .compass__pointer{
    height:250px !important;
        width:250px !important;
    }
    #qiblaDegree{
    margin-top:0px !important;
    }
}

标签： htmlcssmedia-queries

解决方案

这是因为样式被应用于上述任何尺寸768px。使用max-width或添加!important到您想要优先于其他任何样式的任何样式。max-width是更好的选择，因为添加!important会很快变得混乱和混乱。

推荐阅读