我正在尝试为桌面和移动显示制作一个简单的代码。
<html>
<head>
<style>
@media (min-device-width: 770px) {
#containermobile {display:none;}
}
body {
background-color: #000000;
}
@media (max-device-width: 769px) {
#containerPC {display:none;}
}
body {
background-color: #ffffff;
}
</style>
</head>
<body>
<div id="containerPC">pc</div>
<div id="containermobile">mobile</div>
</body>
</html>
但是背景颜色没有显示。我做错了什么？
最佳答案
您没有将 body block 放在 @media block 中，因此第二个只是覆盖了第一个，您得到了白色背景。
此外，出于测试目的，您可能应该避免使用 #000000(黑色)和 #ffffff(白色)。前者会隐藏文本，后者是默认背景颜色，因此您无法确定您的代码是否有效。
以下是正确工作的示例:
@media (min-device-width: 770px) {
#containermobile {display:none;}
body {
background-color: #444444;
}
}
@media (max-device-width: 769px) {
#containerPC {display:none;}
body {
background-color: #cccccc;
}
}
关于html - 移动和桌面显示 CSS 背景颜色，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44092405/