Question

我有一个简单的桌面网站，我想重新设计移动设备的每个页面。更清晰的桌面和移动版本将会有所不同。

我的想法是做如下：

<html>

<style>
#containermobile {
display:none;
}
@media (max-device-width: 769px) {

#containerPC{
display:none;
</style>

<div id="containerPC">
<body>
</body>
</div>

<div id="containermobile">
<body>
</body>
</div>
</html>

PC网站正常显示。但移动网站显示空白页面。

我做错了什么？谢谢。

Answer 1

css
你不能在html文件中有两个正文

可能你正在寻找：

<html>
<head>
<style>
@media (min-device-width: 770px) {
    #containermobile {display:none;}
}
@media (max-device-width: 769px) {
    #containerPC {display:none;}
}
</style>
</head>

<body>

<div id="containerPC">pc</div>
<div id="containermobile">mobile</div>

</body>

</html>

移动与PC结构

1 个答案: