Question

我正在尝试为桌面和移动显示制作一个简单的代码。

<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>

然而背景颜色没有显示。我做错了什么？

Answer 1

你没有将body块放在@media块内，所以第二块刚好覆盖第一块，你得到白色背景。

另外，出于测试目的，您应该避免使用#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;
    }
}

移动和桌面显示CSS背景颜色

1 个答案: