我是CSS的新手,我正在使用媒体查询创建响应式设计。 当我将浏览器的大小更改为480px或更低(仅@media屏幕和(max-device-width:480px))时,设计工作正常,但是当我在移动设备上打开它或使用chrome上的切换设备工具栏时,它会运行太小了,我没有得到与小窗口桌面上相同的设计
是否缺少某些内容(另一种媒体查询或其他内容),使移动设计与桌面上的小窗口相同。
提前谢谢
答案 0 :(得分:3)
您可以尝试将其添加到HTML中吗?
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
我的猜测是变焦是你的问题。要么是这样,要么手机的实际分辨率可能高于480px。
我粘贴的代码行是Bootstrap的一部分,它是最受欢迎的HTML,CSS和JS框架,用于在Web上开发响应式移动优先项目。(引用来自他们的网站。但我并不反对。
我建议看一下使用媒体查询制作的bootstrap,并且真的被认为是响应式网站。