媒体查询的最小宽度不起作用
[英]media queries min width doesn't work
问题描述
I have two media queries. 
我有两个媒体查询。
@media (min-width: 1300px) {
.container {
width: auto;
max-width: 1360px;
}
}
@media (min-width: 1565px) {
.container {
width: auto;
max-width: 1576px;
}
}
whatever the width is. 不管宽度是多少 the container always as the first media query. 容器始终作为第一个媒体查询。 I mean when the width of body is 1570px the container width still 1360px ! 我的意思是，当正文的宽度为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
Just reverse the @media query order. 只需颠倒@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
You can try something like this: 您可以尝试如下操作：
@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
I believe there are other ways to achieve what you are looking for. 我相信还有其他途径可以实现您所寻找的目标。 I would not advise you to stack up min-width queries like that, but rather design your website to behave in a certain way regardless of the minimum width, and only use the media queries for smaller screens, using max-width. 我不建议您像这样堆叠最小宽度的查询，而是将您的网站设计为以某种方式运行，而不管最小宽度如何，并且仅使用最大宽度将媒体查询用于较小的屏幕。
解决方案5
0 2016-07-20 11:04:59
Try this... 尝试这个...
@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.