<分区>
我参加了一个 html/css 类(class)的测验，要求我使用媒体查询根据屏幕尺寸重新组织一些 div。他们提供的我应该添加的代码是这样的:
<style type="text/css">
/*
These are the responsive styles. Throw some breakpoints in here!
*/
.container {
display: flex;
flex-wrap: wrap;
}
.box {
width: 100%;
}
@media screen and (max-width: 400px) {
.dark_blue {
color: blue;
}
}
</style>
还有很多，但这是相关的部分。我想到了这个:
<style type="text/css">
/*
These are the responsive styles. Throw some breakpoints in here!
*/
@media screen and (min-width: 450px) {
.light_blue, .green {
width: 50%;
}
}
@media screen and (min-width: 550px) {
.red {
width: 33.3%;
}
.orange {
width: 66.6%;
}
}
@media screen and (min-width: 800px) {
.container {
width: 800px;
margin-left: auto;
margin-right: auto;
}
}
.container {
display: flex;
flex-wrap: wrap;
}
.box {
width: 100%;
}
@media screen and (max-width: 400px) {
.dark_blue {
color: blue;
}
}
</style>
但它实际上什么也没做。页面完全没有变化。我最终放弃了，看了看答案，他们写的 CSS 和我写的完全一样，只是顺序不同:
<style type="text/css">
/*
These are the responsive styles. Throw some breakpoints in here!
*/
.container {
display: flex;
flex-wrap: wrap;
}
.box {
width: 100%;
}
@media screen and (min-width: 450px) {
.light_blue, .green {
width: 50%;
}
}
@media screen and (min-width: 550px) {
.red {
width: 33.3%;
}
.orange {
width: 66.6%;
}
}
@media screen and (min-width: 800px) {
.container {
width: 800px;
margin-left: auto;
margin-right: auto;
}
}
@media screen and (max-width: 400px) {
.dark_blue {
color: blue;
}
}
</style>
所以我的问题是，这里是如何应用订单的，为什么我的代码什么也没做？