1
所以我的媒體查詢正在播放，我不明白爲什麼。他們位於carrotcruchpvp.comule.com上的styles.css末尾。 720p和1366 x 768似乎正在工作。然而，對該分辨率的任何媒體查詢不起作用，並且1366 x 768似乎優先。就調試而言。媒體查詢不能在1366 x 768以上的任何地方工作？
我試過的東西， 使用！重要的東西。 移動媒體查詢，即頂部爲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>
我把它固定不用擔心。 我不希望它根據擴展/縮小的瀏覽器大小進行更改，因此min-device-height/width對我來說效果很好。乾杯的迴應雖然:) – 2015-02-12 05:14:10