手機和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顯示器

回答

相關問題