Question

我想在此网站上制作响应行为。 meta viewport内容设置为width=device-width, initial-scale=1, maximum-scale=1，但如果我通过缩小其宽度（大约200px宽度和更小）来调整浏览器视频大小，则内容会按比例缩放，响应性会“切换”。

您可以将此网站和jsFiddle演示与下面的图片进行比较。相同的文字具有相同的字体大小，但缩放比例不同。

UPD

我需要知道如何设置20px字体大小，它会按比例缩放，就像不使用meta viewport一样。尝试使用<h1>制作meta viewport而不使用{{1}}，您将明白我的意思

Answer 1

您的问题尚不清楚，但假设您正在谈论demo上的内容在某个最小宽度后阻止其调整大小的事实：

了解meta viewport。

的功能非常重要

视口是用户在网页上的可见区域。

视口因设备而异，在手机上比在电脑屏幕上小。

- Source

此功能可防止用户放大或缩小您的网站。你给我们的代码说你的网页宽度必须是父视口的宽度（等于你的浏览器的可视区域），初始缩放必须是1（这意味着没有初始缩放设置）并且最大比例可以是1（这意味着不允许放大）。

您的网站在某个最小宽度之前没有响应，并且没有与meta viewport的任何直接链接。

网站的响应能力基于CSS中的breakpoints。这给出了基于视口属性的某些CSS规则（在响应的情况下：如果屏幕的宽度在某个最小量px和最大量之间）。根据我的理解，您实际上需要将CSS min-width属性设置为您的网站，如下所示：

body {
    min-width: 300px; /*You'll have to set the value you wish here*/
}

您接下来要做的就是选择处理小于300px的屏幕的方式。之后有两个选项：

您可以选择强制为您的网页提供设备的宽度并防止水平滚动，但这会隐藏所有溢出。我个人建议不要使用这种技术。为此，您需要使用此CSS隐藏所有html个溢出：html {max-width: 100vw; overflow-X: hidden;}。
其他（更好）选项是为您的网页提供所需的最小宽度。这将允许水平滚动和更好的用户体验。为此，请使用此CSS代码：html {min-width: 300px; overflow-X: visible;}（请记住将300px替换为所需的最小宽度。）

这应该是现在的全部。请记住，有数百个响应式网页设计指南可用。希望你的问题得到解决。

Answer 2

解决方案很简单。我只需要设置正文min-width