我对CSS很新,我正在尝试媒体查询。我已经在Stackoverflow和其他网站上关注了很多人对其他帖子的建议但却无法让他们工作。 当屏幕低于一定宽度时,我只是想改变盒子的颜色 这是我的代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" name"viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css" type="text/css" media="screen">
</head>
<body>
<span class="boxes" id="b1">Box 1</span>
<span class="boxes" id="b2">Box 2</span>
<span class="boxes" id="b3">Box 3</span>
<span class="boxes" id="b4">Box 4</span>
<span class="boxes" id="b5">Box 5</span>
</body>
</html>
CSS文件:
.boxes {
height: 200px;
width: 200px;
color: #FFF;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding: 80px;
margin: 20px;
top: 100px;
position: relative;
background-color: red;
}
@media only screen and (max-width:600px) {
.boxes {
background-color: #000000;
}
}
我试过了:
* @media screen
没有 CSS文件中的only
字词
* html链接标记中没有media="screen"
CSS文件中的max-device-width
HTML链接标记中的media="only screen and (max-device-width: 600px)"
。
我没有尝试过任何工作,我缺少什么?
答案 0 :(得分:0)
您在视口元标记中缺少等号。放置它时,您的代码将起作用。 name =“viewport”
答案 1 :(得分:0)
请务必将<meta>
标记更改为:
<meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1.0">
您可以尝试指定背景颜色:
@media screen and (min-width:601px) {
.boxes {
background-color: red;
}
}
同样,你的照片也适用于我,但也许通过指定只有601px以上的红色背景颜色才能正常工作。
.boxes {
display: inline-block; /* Added this so they don't overlap */
height: 200px;
width: 200px;
color: #FFF;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding: 80px;
margin: 20px;
top: 100px;
position: relative;
}
@media screen and (min-width:601px) {
.boxes {
background-color: red;
}
}
@media screen and (max-width:600px) {
.boxes {
background-color: #000000;
}
}
<span class="boxes" id="b1">Box 1</span>
<span class="boxes" id="b2">Box 2</span>
<span class="boxes" id="b3">Box 3</span>
<span class="boxes" id="b4">Box 4</span>
<span class="boxes" id="b5">Box 5</span>