我已经编写了两种不同类型的 css 显示样式(一种用于 flex，一种用于网格)，并且随着屏幕尺寸的变化，它们中的每一种都会以不同的方式应用。我先做了移动版，然后是桌面版。 下面是移动版本的 html&CSS 代码，它按原样显示。
@media (max-width: 400px) {
.container {
background-color: lavender;
display: flex;
justify-content: center;
}
.header {
background-color: rgb(255,80,100);
}
header {
font-size: 80px;
padding: 95px;
font-weight: bold;
}
.p {
background-color: #5ABFF6;
}
p {
font-size: 40px;
padding: 95px;
font-weight: bold;
}
.aside1 {
background-color: #F8D557;
}
.aside1_1 {
font-size: 80px;
padding: 95px;
font-weight: bold;
}
.aside2 {
background-color: #EA77B1;
}
.aside2_2 {
font-size: 80px;
padding: 95px;
font-weight: bold;
}
.footer {
background-color: #AAE89D;
}
footer {
font-size: 80px;
padding: 100px;
font-weight: bold;
}
}
<body>
<div class="container header">
<header> Header </header>
</div>
<div class="container p">
<p>But Apple is clearly disappointed with
itself over this whole thing. It’s a humbling embarrassment
for a company that so often highlights its focus on user
security and privacy. "Security is a top priority for every
Apple product, and regrettably we stumbled with this
release</p>
</div>
<div class="container aside1">
<div class="aside1_1">Aside1</div>
</div>
<div class="container aside2">
<div class="aside2_2">Aside2</div>
</div>
<div class="container footer">
<footer>Footer</footer>
</div>
但是，如果我附上第二个 CSS 代码(用于桌面屏幕尺寸)，即使我将宽度缩小到 400 像素以下，页面布局也会以某种方式变得困惑。 下面是完整的 CSS 代码。
@media (max-width: 400px) {
.container {
background-color: lavender;
display: flex;
justify-content: center;
}
.header {
background-color: rgb(255,80,100);
}
header {
font-size: 80px;
padding: 95px;
font-weight: bold;
}
.p {
background-color: #5ABFF6;
}
p {
font-size: 40px;
padding: 95px;
font-weight: bold;
}
.aside1 {
background-color: #F8D557;
}
.aside1_1 {
font-size: 80px;
padding: 95px;
font-weight: bold;
}
.aside2 {
background-color: #EA77B1;
}
.aside2_2 {
font-size: 80px;
padding: 95px;
font-weight: bold;
}
.footer {
background-color: #AAE89D;
}
footer {
font-size: 80px;
padding: 100px;
font-weight: bold;
}
}
@media (min-width:400px) {
body {
background-color: lavender;
display: grid;
grid-template-columns: 25% 50% 25%;
grid-template-rows: 25% 50% 25%;
text-align: center;
height: 800px;
}
.header {
background-color: rgb(255,80,100);
grid-column: 1 / 4;
padding-top: 50px;
}
header {
font-size: 40px;
padding: 20px;
font-weight: bold;
}
.p {
background-color: #5ABFF6;
grid-column: 2 / 3;
}
p {
font-size: 30px;
padding: 20px;
font-weight: bold;
}
.aside1 {
background-color: #F8D557;
grid-column: 1/2;
grid-row: 2/3;
}
.aside1_1 {
font-size: 40px;
padding: 20px;
font-weight: bold;
}
.aside2 {
background-color: #EA77B1;
}
.aside2_2 {
font-size: 40px;
padding: 20px;
font-weight: bold;
}
.footer {
background-color: #AAE89D;
grid-row: 3 / 4;
grid-column: 1 / 4;
}
footer {
font-size: 40px;
padding: 20px;
font-weight: bold;
padding-top: 70px;
}
}
最佳答案
因为 CSS 从 TOP 应用到 BOTTOM。
这意味着最后设置的规则将被执行。
所以总是把你的媒体查询放在 css 的底部，例如
.container {
/* your desktop styles goes here */
}
@media (max-width: 400px) {
.container {
/* your media styles goes here */
}
}
更新
看看这个也Why do I have to put media queries at the bottom of the stylesheet?
关于html - 使用媒体查询时更改显示样式不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47570645/