我正在为响应式网站设置样式表,并希望为宽度 >= 768px 的屏幕和宽度 < 768px 的屏幕提供不同的布局。但是,当我使用 @media (max-width: 767px)
时,767px 和 768px 都会受到媒体查询内容的影响。
我试过使用 @media (max-width: 768px)
代替,但它(如预期的那样)将媒体查询内容应用到 768px,这不是我需要的结果。
你可以在任何页面尝试这段代码(我在 Firefox 和 Chrome 上试过,结果相同):
body {
background: red;
}
@media (max-width: 767px) {
body {
background: green;
}
}
我创建了一个 fiddle ,您可以在其中看到问题:https://jsfiddle.net/e0hdyqc9/
当您将这些规则添加到页面时,767px 和 768px 都是红色的。但是,如果您尝试用 768px 替换 767px,您会发现现在 767px 和 768px 都是绿色的!这怎么可能?
最佳答案
将其放在页眉中:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
添加此 CSS:
@media only screen and (max-width: 767px) {
body { background-color: green; }}
@media only screen and (min-width:768px) {
body { background-color: yellow;}}
由于最小值和最大值,红色背景不会显示!
当 width=767px
为绿色且 width=768px
为黄色时,不会有红色空间。
关于html - 媒体查询最大宽度不包括在内,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56842906/