手机和PC显示器

我想为PC和手机显示器制作一个简单的代码。手机和PC显示器

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

但是背景颜色没有显示。我究竟做错了什么？

来源

2017-05-21 Theodore.us

您没有将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; 
} 
}

来源

2017-05-21 01:54:33

手机和PC显示器

回答

相关问题