【发布时间】：2015-04-11 08:28:05
【问题描述】：
所以我的媒体查询正在播放，我不明白为什么。它们位于carrotcruchpvp.comule.com 上styles.css 的末尾。 720p 和 1366 x 768 似乎工作正常。但是，对该分辨率的任何媒体查询都不起作用，并且 1366 x 768 似乎优先。就调试而言。
我尝试过的事情， 在事物上使用 !important。 移动媒体查询，即顶部为 2160 x 1440，分辨率递减。 宽度/高度，最小宽度/最小高度。我知道 min- 使用浏览器宽度，但只是想仔细检查一下。
如果我在这里找不到解决方案，我的下一步就是用 javascript 完成所有操作。使用更新版本的 chrome。
这是很多：
/* 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>【问题讨论】：
标签： css media-queries