我有两个媒体查询。
@media (min-width: 1300px) {
.container {
width: auto;
max-width: 1360px;
}
}
@media (min-width: 1565px) {
.container {
width: auto;
max-width: 1576px;
}
}
无论宽度如何。容器始终作为第一个媒体查询。 我的意思是当身体的宽度是1570px时,容器宽度仍然是1360px!
答案 0 :(得分:2)
在HTML <head>
中设置viewport非常重要。
<meta name="viewport" content="width=device-width, initial-scale=1.0">
答案 1 :(得分:1)
只需撤消@media查询顺序。
@media (min-width: 1565px) {
.container {
width: auto;
max-width: 1576px;
}
}
@media (min-width: 1300px) {
.container {
width: auto;
max-width: 1360px;
}
}
答案 2 :(得分:0)
您可以尝试这样的事情:
@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;
}
}
答案 3 :(得分:0)
我相信还有其他方法可以实现您的目标。我不建议你像这样叠加最小宽度的查询,而是设计你的网站以某种方式表现,无论最小宽度如何,并且只使用媒体查询,使用max-width。
答案 4 :(得分:0)
试试这个......
@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%;
}
}