0

我正在尝试为智能手机定义 CSS，而我的 CSS 中的其他所有内容都可以按原样进行。

CSS：

.content { background: orange; padding: 30px; }
#mobile { display:none; }

@media screen and (max-device-width: 480px){
    #mobile { display: block; }
    #desktop { display: none; }
}

html:

<!DOCTYPE html>
<html>
<head></head>
<body>
  <div id="mobile">this is mobile</div>
  <div id="desktop">this is desktop</div>
</body>
</html>

现场演示：http: //jsfiddle.net/L5zDQ/

如果您使用上面的演示缩小浏览器窗口，“这是移动的”永远不会出现。我错过了什么？

4

2 回答 2

1

而不是使用max-device-width你应该使用max-width，这取决于浏览器当前状态的大小：

@media screen and (max-width: 480px) {
    ...
}
于 2013-01-28T19:51:00.003 回答
0

max-device-width 是屏幕的大小，当您调整窗口大小时它不会改变。

您想要的是max-width与浏览器窗口的大小相比；

@media screen and (max-width: 480px){
    #mobile { display: block; }
    #desktop { display: none; }
}

有关该主题的更多讨论，请参阅此问题。

于 2013-01-28T19:51:19.740 回答