作为测试,我创建了4列(具有相应的颜色),每列有25%的宽度。我把它们浮起来,以便它们并排遍布整个页面。
我想使用媒体查询,以便在视口变得足够小的情况下并排只有两列,如果视口更小,则每行一列。我只是在一个HTML文档中执行此操作,因为我并不真正关心创建一个附带的CSS文档。
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
@media only screen and (max-width: 787px) {
.column1, .column2, .column3, .column4 {
width: 50%;
}
}
@media only screen and (max-width: 420px) {
.column1, .column2, .column3, .column4 {
width: 100%;
}
}
.column1, .column2, .column3, .column4 {
width: 25%;
height: 300px;
}
.column1 {
background-color: red;
float: left;
}
.column2 {
background-color: blue;
float: left;
}
.column3 {
background-color: yellow;
float: right;
}
.column4 {
background-color: black;
float: right;
color: white;
}
</style>
</head>
<body>
<div class="column1">
<p>breakfast</p>
</div>
<div class="column2">
<p>lunch</p>
</div>
<div class="column3">
<p>dinner</p>
</div>
<div class="column4">
<p>snack</p>
</div>
</body>
我觉得我在做一些令人难以置信的错误。提前谢谢。
答案 0 :(得分:0)
媒体查询应低于您的CSS样式而不是它们之上。 检查这个小提琴〜https://jsfiddle.net/g4j4ewpp/
.column1,
.column2,
.column3,
.column4 {
width: 25%;
height: 300px;
}
.column1 {
background-color: red;
float: left;
}
.column2 {
background-color: blue;
float: left;
}
.column3 {
background-color: yellow;
float: right;
}
.column4 {
background-color: black;
float: right;
color: white;
}
@media only screen and (max-width: 787px) {
.column1,
.column2,
.column3,
.column4 {
width: 50%;
}
}
@media only screen and (max-width: 420px) {
.column1,
.column2,
.column3,
.column4 {
width: 100%;
}
}
答案 1 :(得分:0)
GvM提供答案的解释 -
浏览器从上到下解析代码。你可能有两千个
@media only screen and (min-width: 748px){
.class {
background-color: some-color;
height: some-height;
}
}
语句。只要它们都是相同的高度,最后一个将生效,之前的所有都将被忽略。
另外,假设您有三个查询设置了您可能需要的特定属性(如果它是中等大小),如果它是一个大尺寸则设置一个额外属性。
@media only screen and (min-width: 320px) {
/*give a div 40px height and blue text*/
.this-div {
color: blue;
height: 40px;
background-color: lemonchiffon;
}
/*declare a div, but hide it until the screen is big enough*/
.hidden-div {
display: none;
width: 50%;
background-color: orange;
}
}
@media only screen and (min-width: 480px) {
/*style a different div to have blue text and assign it height*/
.that-div {
color: blue;
height: 30%;
background-color: magenta;
}
/*change the first div's font to red, but keep its height the same*/
.this-div {
color: red;
}
@media only screen and (min-width: 748px) {
/*change the first div's font again, and now it takes up the entire screen.*/
.this-div {
color: green;
height: 100%;
}
/*split the second div and a new third div*/
.that-div {
width: 50%;
}
.hidden-div {
display: inline;
}
}
所有媒体查询的背景颜色保持不变。但是,根据最近接受的查询,高度和宽度可能会发生变化 - 具体取决于视口的大小。