如何让网站响应式向下调整到一定宽度，然后缩小以适应？

Question

我正在使用这个视口元标记：

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">

我的网站是响应式设计的。但我无法解释宽度小于 320px 的设备的响应式设计。如何让网站缩小以适应设备（而不是水平滚动）< 320px width?

Answer 1

你必须从正文中删除边距和填充，并将其宽度设置为 100%， 为了不依赖浏览器应用的默认宽度，请将其写入 html 中的标签中或从 CSS 文件中调用它

body{padding:0; margin:0; width:100%;}

如果磁盘覆盖则设置最大宽度：

#image-grid img {max-width: 100%;}

也适用于字体

@media screen and (max-width: 600px) {
h1 { font-size: 30px; }
}