我正在测试定义的标准分辨率的负责任设计（定义的分辨率来自FireFox）。如果页面宽度设置为最大宽度650px都可以，但如果我将浏览器宽度更改为651px以上，则CSS代码不会处理。我没有看到问题。
window.onresize = displayWindowSize;
window.onload = displayWindowSize;
function displayWindowSize() {
myWidth = window.innerWidth;
myHeight = window.innerHeight;
// your size calculation code here
document.getElementById("responsible-design-debug").innerHTML = "Responsible design debug: " + myWidth + "x" + myHeight;
}; body {
background-color: #F5F5F5;
font-family: Verdana, Geneva, Tahoma, sans-serif;
font-size: 0.8em;
}
.Logo {
height: 35px;
margin-bottom: 15px;
}
/**
* DEVICE: Universally
* DIMENSIONS: 1920px and more
* ORIENTATION: Portrait
**/
@media screen and (orientation: portrait) and (min-width: 1920px) {
.responsible-design-debug {
background-color: green;
float: left;
}
}
/**
* DEVICE: Universally
* DIMENSIONS: 1280px - 1920px
* ORIENTATION: Portrait
**/
@media screen and (orientation: portrait) and (min-width: 1280px) and (max-width: 1919px) {
.responsible-design-debug {
background-color: lightgreen;
float: left;
}
}
/**
* DEVICE: Universally
* DIMENSIONS: 980px - 1280px
* ORIENTATION: Portrait
**/
@media screen and (orientation: portrait) and (min-width: 980px) and (max-width: 1279px) {
.responsible-design-debug {
background-color: red;
float: left;
}
}
/**
* DEVICE: Universally
* DIMENSIONS: 800px - 980px
* ORIENTATION: Portrait
**/
@media screen and (orientation: portrait) and (min-width: 800px) and (max-width: 979px) {
.responsible-design-debug {
background-color: orange;
float: left;
}
}
/**
* DEVICE: Universally
* DIMENSIONS: 768px - 800px
* ORIENTATION: Portrait
**/
@media screen and (orientation: portrait) and (min-width: 768px) and (max-width: 799px) {
.responsible-design-debug {
background-color: blueviolet;
float: left;
}
}
/**
* DEVICE: Universally
* DIMENSIONS: 360px - 768px
* ORIENTATION: Portrait
**/
@media screen and (orientation: portrait) and (min-width: 360px) and (max-width: 767px) {
.responsible-design-debug {
background-color: blue;
float: left;
}
}
/**
* DEVICE: Universally
* DIMENSIONS: 320px - 360px
* ORIENTATION: Portrait
**/
@media screen and (orientation: portrait) and (min-width: 320px) and (max-width: 359px) {
.responsible-design-debug {
background-color: aqua;
float: left;
}
}
/**
* DEVICE: Universally
* DIMENSIONS: 0px - 320px
* ORIENTATION: Portrait
**/
@media screen and (orientation: portrait) and (min-width: 0px) and (max-width: 319px) {
.responsible-design-debug {
background-color: yellow;
float: left;
}
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Responsible design</title>
</head>
<body>
<div id="responsible-design-debug" class="responsible-design-debug">Responsible design debug: init</div>
<img src="Image.png" alt="Image.png" class="Logo" />
<div id="example">
<p>Lorem ipsum dolor sit amet consectetuer In et elit diam arcu. Lacus enim molestie dictumst quis convallis pellentesque consectetuer ipsum ligula pellentesque. Nullam elit nunc amet et nec semper lacus ac lacinia et. At Sed Proin tempor lacus tristique senectus eu est lacinia dui. Nisl Ut Vestibulum ac Vestibulum Phasellus lacinia ut auctor consequat felis. Sapien dolor Morbi Ut fringilla at molestie eu.</p>
<p>Augue sodales est ligula eget cursus quis id orci magna et. Dapibus ac elit diam pede mauris Nam interdum adipiscing et suscipit. Nonummy justo laoreet In elit magna condimentum enim quis non tempor. Malesuada eget habitant ligula ut consequat ut felis amet libero cursus. Lobortis tellus volutpat pellentesque leo ipsum id Vestibulum suscipit convallis Donec. Amet eget dui.</p>
</div>
</body>
</html>
谢谢你，最诚挚的问候， 彼得
答案 0 :(得分：0)
这是因为您正在使用and (orientation: portrait)，所以一旦窗口的宽度值高于高度，您的CSS就不会被考虑在内，因为它不会被考虑在内。在那一点上考虑了landscape方向。如果您从所有媒体查询中删除它，它将按预期工作：
window.onresize = displayWindowSize;
window.onload = displayWindowSize;
function displayWindowSize() {
myWidth = window.innerWidth;
myHeight = window.innerHeight;
// your size calculation code here
document.getElementById("responsible-design-debug").innerHTML = "Responsible design debug: " + myWidth + "x" + myHeight;
};body {
background-color: #F5F5F5;
font-family: Verdana, Geneva, Tahoma, sans-serif;
font-size: 0.8em;
}
.Logo {
height: 35px;
margin-bottom: 15px;
}
/**
* DEVICE: Universally
* DIMENSIONS: 1920px and more
**/
@media screen and (min-width: 1920px) {
.responsible-design-debug {
background-color: green;
float: left;
}
}
/**
* DEVICE: Universally
* DIMENSIONS: 1280px - 1920px
**/
@media screen and (min-width: 1280px) and (max-width: 1919px) {
.responsible-design-debug {
background-color: lightgreen;
float: left;
}
}
/**
* DEVICE: Universally
* DIMENSIONS: 980px - 1280px
**/
@media screen and (min-width: 980px) and (max-width: 1279px) {
.responsible-design-debug {
background-color: red;
float: left;
}
}
/**
* DEVICE: Universally
* DIMENSIONS: 800px - 980px
**/
@media screen and (min-width: 800px) and (max-width: 979px) {
.responsible-design-debug {
background-color: orange;
float: left;
}
}
/**
* DEVICE: Universally
* DIMENSIONS: 768px - 800px
**/
@media screen and (min-width: 768px) and (max-width: 799px) {
.responsible-design-debug {
background-color: blueviolet;
float: left;
}
}
/**
* DEVICE: Universally
* DIMENSIONS: 360px - 768px
**/
@media screen and (min-width: 360px) and (max-width: 767px) {
.responsible-design-debug {
background-color: blue;
float: left;
}
}
/**
* DEVICE: Universally
* DIMENSIONS: 320px - 360px
**/
@media screen and (min-width: 320px) and (max-width: 359px) {
.responsible-design-debug {
background-color: aqua;
float: left;
}
}
/**
* DEVICE: Universally
* DIMENSIONS: 0px - 320px
**/
@media screen and (min-width: 0px) and (max-width: 319px) {
.responsible-design-debug {
background-color: yellow;
float: left;
}
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Responsible design</title>
</head>
<body>
<div id="responsible-design-debug" class="responsible-design-debug">Responsible design debug: init</div>
<img src="Image.png" alt="Image.png" class="Logo" />
<div id="example">
<p>Lorem ipsum dolor sit amet consectetuer In et elit diam arcu. Lacus enim molestie dictumst quis convallis pellentesque consectetuer ipsum ligula pellentesque. Nullam elit nunc amet et nec semper lacus ac lacinia et. At Sed Proin tempor lacus tristique
senectus eu est lacinia dui. Nisl Ut Vestibulum ac Vestibulum Phasellus lacinia ut auctor consequat felis. Sapien dolor Morbi Ut fringilla at molestie eu.</p>
<p>Augue sodales est ligula eget cursus quis id orci magna et. Dapibus ac elit diam pede mauris Nam interdum adipiscing et suscipit. Nonummy justo laoreet In elit magna condimentum enim quis non tempor. Malesuada eget habitant ligula ut consequat ut
felis amet libero cursus. Lobortis tellus volutpat pellentesque leo ipsum id Vestibulum suscipit convallis Donec. Amet eget dui.</p>
</div>
</body>
</html>