gpt4 book ai didi

css - 为什么我不能针对智能手机而不是采用响应式设计的智能手机

转载 作者:太空宇宙 更新时间:2023-11-04 15:21:09 25 4
gpt4 key购买 nike

我正在尝试为智能手机定义 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/

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

最佳答案

您应该使用 max-width 而不是使用 max-device-width,它取决于浏览器当前状态的大小:

@media screen and (max-width: 480px) {
...
}

关于css - 为什么我不能针对智能手机而不是采用响应式设计的智能手机,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14569941/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com