我有一个简单的div框，里面有文本，我想根据用户在台式机/平板电脑/笔记本电脑或移动设备中查看而设置不同的格式。 我正在尝试使用@media screen，但可能我做错了。 下面是我尝试的方法:
.topbox {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
z-index: 9999;
height: 100px;
padding: 20px 10px;
}
@media only screen and (max-width: 600px) {
.topbox {
background: #9b4fe0;
width: 300px;
}
}
@media only screen and (max-width: 800px) {
.topbox {
background: #ff5000;
width: 600px;
}
}
在我的脑子里有:
这是您所拥有的代码:
@media only screen and (max-width: 600px) {
.topbox {
background: #9b4fe0;
width: 300px;
}
}
@media only screen and (max-width: 800px) {
.topbox {
background: #ff5000;
width: 600px;
}
}
使用这段代码，第二个媒体查询将覆盖第一个媒体查询--它紧随其后，所有小于800px的内容也都小于600px，因此600px规则不会有任何影响。 要解决这个问题，只需调转他们的顺序:
@media only screen and (max-width: 800px) {
.topbox {
background: #ff5000;
width: 600px;
}
}
@media only screen and (max-width: 600px) {
.topbox {
background: #9b4fe0;
width: 300px;
}
}
这样，第一条规则将适用于宽度在601到800px之间的屏幕，第二条规则将适用于宽度等于或小于600px的屏幕。
基于这个CSS，您的topbox是一个类而不是一个id，因此它应该是.topbox而不是#topbox。
.topbox {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
z-index: 9999;
height: 100px;
padding: 20px 10px;
}
@media only screen and (max-width: 600px) {
.topbox {
background: #9b4fe0;
width: 300px;
}
}
@media only screen and (max-width: 800px) {
.topbox {
background: #ff5000;
width: 600px;
}
}
