媒体查询的最小宽度不起作用
[英]media queries min width doesn't work
问题描述
我有两个媒体查询。
@media (min-width: 1300px) {
.container {
width: auto;
max-width: 1360px;
}
}
@media (min-width: 1565px) {
.container {
width: auto;
max-width: 1576px;
}
}
不管宽度是多少 容器始终作为第一个媒体查询。 我的意思是，当正文的宽度为1570px时，容器的宽度仍为1360px！
5 个解决方案
解决方案1
2 2017-06-06 05:46:56
在HTML <head>设置视口非常重要。
<meta name="viewport" content="width=device-width, initial-scale=1.0">
解决方案2
1 2016-07-20 10:38:40
只需颠倒@media查询顺序。
@media (min-width: 1565px) {
.container {
width: auto;
max-width: 1576px;
}
}
@media (min-width: 1300px) {
.container {
width: auto;
max-width: 1360px;
}
}
解决方案3
0 2016-07-20 10:43:08
您可以尝试如下操作：
@media only screen and (min-width:1300px) and (max-width: 1565px) {
.container {
width: auto;
max-width: 1360px;
}
}
@media only screen and (min-width:1565px) {
.container {
width: auto;
max-width: 1576px;
}
}
解决方案4
0
我相信还有其他途径可以实现您所寻找的目标。 我不建议您像这样堆叠最小宽度的查询，而是将您的网站设计为以某种方式运行，而不管最小宽度如何，并且仅使用最大宽度将媒体查询用于较小的屏幕。
解决方案5
0 2016-07-20 11:04:59
尝试这个...
@media only screen and (min-width:1300px) and (max-width: 1564px) {
.container {
max-width: 1360px;
width: 100%;
}
}
@media only screen and (min-width:1565px) {
.container {
max-width: 1576px;
width: 100%;
}
}
媒体查询不起作用
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.