我正在尝试将一个旧网页转换为响应式网页设计。
最小宽度为480像素,桌面版本将在稍后添加断点。
到目前为止的代码:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body{width:480px;margin:auto}
#wrapper{width:480px}
#header{width:480px;height:100px;text-align:center;background:black;color:white}
#content{width:480px;background:#cfcfcf;height:1000px}
</style>
</head>
<body>
<div id="wrapper">
<div id="header">HEADER</div>
<div id="content">CONTENT</div>
</div>
</body></html>
我本以为网页会缩小到我的移动设备宽度(320像素),但它却“溢出”(见屏幕截图,“标题”应居中):
我以为设置viewport-meta就能解决这样的问题?!
当然,我可以在屏幕上点击来缩放/适应网页,但默认情况下,它应该这样做。
我做错了什么?
谢谢!
发布于 2019-04-24 04:57:59
来自:https://www.w3schools.com/css/css_rwd_viewport.asp
width=device-width
部件将页面宽度设置为跟随设备的屏幕宽度(根据设备的不同而有所不同)。
这意味着设备将确定宽度,在大多数移动设备上通常为320px到360px。尽管发布的规格在许多手机上是1080px宽或更宽,但它们会调整设备像素,因此不会提供桌面版本。你的例子是将480px宽的内容放到你的320px宽的设备上,所以告诉你的设备要有480px宽,如下所示:
<meta name="viewport" content="width=480, initial-scale=1.0">
我在评论中也提到了arieljuod提供的width: 100%; min-width: 480px; instead of width: 480px;
的用法。他说的是max-width,但我认为我们应该使用min-width,因为你不希望你的内容小于480px。最后,检查页边距等,以及框的大小。这将对响应式网格布局产生巨大影响。查看CSS规范化以获取更多信息:https://css-tricks.com/reboot-resets-reasoning/
https://stackoverflow.com/questions/55818582
复制相似问题