Question

所以我的媒体查询正在播放，我看不出原因。它们位于carrotcruchpvp.comule.com上styles.css的末尾。 720p和1366 x 768似乎正在工作。但是，对该分辨率的任何媒体查询都不起作用，并且1366 x 768似乎优先。就调试而言。

我尝试过的事情，使用！对事物很重要。移动媒体查询，即顶部2160 x 1440，分辨率下降。宽度/高度，最小宽度/最小高度。我知道min-使用浏览器宽度，但只是想仔细检查。

如果我在这里找不到解决方案，我的下一步就是在javascript中完成所有操作。使用chrome的更新版本。

Heres the lot：

/* Media query for standard 1280 x 720 resolution, 16:9 aspect ratio */



@media all and (min-device-width:1280px) and (min-device-height:720px) {

.complainant_txt {

font-size: 1.6vh;

}   
    
.hex-grid-mid {

left:9.5%;

}

.hi-icon.button.hi-icon-earth {

left:-25vh;

}    

.hexagon-scale {
    width: 8.5vw;
    height: 29.5vh;
}

.hex-grid-top .hexagon {
    float: left;
    margin: 0 0.57vw;
}

.hex {
    width: 55%;
    position: relative;
    height: 40%;
    left: 31%;
    margin-top: -1.5%;
}

.quote {
    font-family: 'Open Sans', sans-serif;
    top: 30%;
    left: 5%;
    font-size: 0.7vw;
    height: 38%;
    
}
    
h4 {

margin-bottom:1%;

}
      
#info_btn {

left:82vh;

}

#fourth_quote {

left:3%;

}    
    
    
#firststat {
    left: 3% ;
}

#secondstat {
    margin-left: 4.6%;
}

#thirdstat {
    margin-left: 2%;
}
    
    
#firststat{
    opacity: 0;
    -moz-transition: opacity 1.2s;
    -o-transition: opacity 1.2s;
    transition: opacity 1.2s;
    display: inline-block;
    font-family: 'Open Sans';
    font-size: 76%;
    width: 14%;
    margin-left: 26%;
    text-align: center;
    margin-top: 0;
    margin-bottom: 0;
    position: relative;
    bottom: 1em;
    vertical-align: top
}

}




/* Media query for standard 1366 x 768 resolution, 16:9 aspect ratio */

@media all and (min-device-width:1366px) and (min-device-height:768px) {

    
.hex-grid-mid {

left:9.5%;

}
    
.hi-icon.button.hi-icon-earth {

left:-25vh;

}    

.hexagon-scale {
    width: 8.5vw;
    height: 29.5vh;
}

.hex-grid-top .hexagon {
    float: left;
    margin: 0 0.57vw;
}

.hex {
    width: 55%;
    position: relative;
    height: 41%;
    left: 30.6%;
    margin-top: -1.5%;
}

.quote {
    font-family: 'Open Sans', sans-serif;
    top: 32%;
    left: 5%;
    font-size: 0.7vw;
    height: 38%;
    
}
    
   
.complainant_txt {

font-size: 1.6vh;

}

#firststat,
#secondstat,
#thirdstat {

bottom: 3.8em;

}
      
    
#history {

margin-top:3.3%;
    
}    
    
h4 {

margin-bottom:1%;

}
    

#info_btn {

left:82vh;

}
    

#fourth_quote {

left:3%;

}
     

#window4 {

height:19vh;

}    
  
#window5 {

height:26vh;

}   
  
#window6 {

height:28vh;

}  
    
#window7 {

height:34vh;

}  
    
#window8 {

height:31vh;

}   
    
#window9 {

height:28vh;

}   
    
}







@media all and (min-device-width:1600px) and (min-device-height:900px) {

.hi-icon-wrap {

margin-left: 4.7%;

}   
    
.hi-icon.button.hi-icon-earth {

left:-25vh;

}
     
    
#history {

margin-top:3.3%;
    
}    

   
#info_btn {

left:80vh;

}    
    
}



@media all and (min-device-width:1920px) and (min-device-height:1080px) {

.quote {

    top: 39%;

}

.hi-icon.button.hi-icon-earth {

left:-25vh;

}
    
#info_btn {

left:81vh;

}    
    
}






/* Media queries for my SP3 with 3:2 aspect ratio. */
@media all and (min-device-width:2160px) and (min-device-height:1440px){ 

.quote {

top:32%;

}

    
#exit, #exit1, #exit2 {
right: 4%;
top: -2%;
}    
    

.hi-icon.button.hi-icon-earth {

left:-21vh;

}    

#second_quote {
top: 35%;
left: 5%;
}
    
#decision_btn {
top: -12vh;
left: 36vw;
}

#up_right2 {
bottom: 4.8%;
left: 56%;
}
    
#info_btn {

left: 68vh;


top: -11.5vh;
}

}

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="viewport" content="width=device-height, initial-scale=1">
<title>Catholic Professional Standards</title>
<link href="plugins/fullpage/jquery.fullPage.css" rel="stylesheet" type="text/css">
<link href="styles.css" rel="stylesheet" type="text/css">
<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Droid+Serif' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Montserrat:700' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet' type='text/css'>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="plugins/fullpage/jquery.fullPage.js" type="text/javascript"></script>
<script src="js/fullpage_initialisation.js" type="text/javascript"></script>
<script src="js/main.js" type="text/javascript"></script>


</head>

Answer 1

假设这是一个网站而不是您在移动设备（例如应用）上专门使用的内容，那么您没有理由在min-device-width上使用min-width媒体查询。 min-device-width将使用设备大小，而不是基于扩展浏览器而更改。 min-width将实现这一目标。

以下是基于另一个StackOverflow问题的更多信息： CSS media queries min-width and min-device-width conflicting?

媒体查询不能在1366 x 768以上的任何地方工作？

1 个答案: