网站如何使元素在所有设备上的缩放比例相同并在缩放时缩放？

Question

现在我正在制作我的所有元素的宽度和高度百分比，以便无论设备如何，它们都可以缩放相同。例如，无论某人是在 720p 还是 4k 显示器上查看输入元素，它都应该在浏览器中保持一致。

现在我的问题是，我试图让我的元素随着缩放（浏览器 zoom:ctrl 和 +/-）的增加或减少而缩放，但是因为我使用的是百分比宽度和高度，元素不缩放。好吧，实际上我认为当我放大时输入变小，我不确定为什么会这样。当您放大其他网站时，他们的输入会在宽度和高度上变大。当您缩小时，元素会变小。

执行此操作的正确方法是什么？显然这是可以做到的，因为我访问的每个站点，包括 Whosebugs 元素（例如搜索输入）在查看时看起来大小相同，并且在缩放时缩放高度和宽度。

我尝试过的：

使用固定的最小宽度和最小高度，但这并不是我想要的。如果 width/height 百分比高于固定的 min-width/height 则元素不会调整大小，直到缩放 % * 固定的 min-width/height 像素数更大。如果固定的 min-width/height 像素数高于元素上设置的 width/height %，则元素将是固定的 min-width/height 的大小并且元素大小不会看起来所有显示器都一样。
为 width/height 使用固定像素将使元素在缩放时调整大小，但它在所有显示器上看起来都不一样。
在父级 div "search" 上使用 flexbox 使子级在缩放时输入 "test" grow/shrink。好像没什么作用。

注意：不要在没有完整查看代码的情况下尝试放大，否则由于 Whosebug 自己的代码，它会在缩放时使输入缩放。

html, body {
    width: 100%;
    height: 100%;
    margin:0px;
}
div#maincontainer {
    height: 100%;
    width:100%;
    background-color: orange;
}
div#search {
    position: relative;
    top: 50%;
    margin:auto;
    height: 5%;
    width: 35%;
}
input#test {
    position: relative;
    width: 100%;
    height: 100%;
}

<div id="maincontainer">
    <div id="search">
        <input id="test" type="text" placeholder="TESTING" />
    </div>
</div>

Answer 1

浏览器缩放（使用"Ctrl and +/-"）实际上改变了font-size: 100%;（相当于font-size: 1em;）对应的值。这就是为什么在使用此缩放功能时会缩放输入元素内的文本的原因。但是因为输入元素的大小没有改变（见下面的解释），所以看起来后者变小了......而实际上它的内部文本变大了。

据我所知，这个想法是让访问者有机会阅读 text（同时可能会破坏页面布局），如果由于某种原因他们遇到困难使用网站设计者选择的文字大小。

对于输入元素的大小，因为您是相对于其容器的大小（使用百分比）定义它的，直到具有 100% 视口的正文，所以您没有给它任何机会被这个功能缩放，而是你让它依赖于视口大小。因此，如果您确实调整了视口的大小（即浏览器 window），您将看到元素大小发生变化，但其内部文本不会发生变化。这听起来可能就像您一开始所寻找的那样（在不同的设备上以完全相同的比例呈现，实际上是在不同的视口尺寸上），但今天的网站所做的实际上是一种完全不同的技术。

他们所做的叫做"Responsive Design"，即CSS使用"media queries"可以检测设备的类型、屏幕大小（实际上是查看端口大小）等。这些媒体查询充当 CSS 规则的条件块。典型的用例是当屏幕足够宽时在一侧呈现一个大菜单，但当屏幕很窄时只呈现一个菜单按钮。

您还可以注意到，根据视口大小，它们实际上并没有以完全相同的比例呈现（这正是您希望通过仅使用基于百分比的大小来实现的）。大多数时候，有一个空的 space（在 Whosebug 的情况下在两侧）填充空白，而内容具有相同的像素大小，直到视口大小变化太大以至于它触发媒体查询，然后应用一组不同的 CSS 规则，可能会完全改变页面布局。

另一个好的做法是尽可能使用 em 单位的大小（但不一定定位），它指的是当前字体大小。这样，当访问者使用浏览器缩放功能时，这些尺寸将相应缩放，而不仅仅是文本。例如，对于您的情况，您可以将输入元素的高度定义为 1.5em，这样它总是比其内部文本大 50%。

最后，我鼓励您使用大多数浏览器都具有的开发工具的 DOM 和样式检查器（按 F12 打开开发工具）。他们通常还提供元素选择器，允许您在页面上精确定位您想要查看其确切 DOM 和应用的样式规则的元素。这是学习其他人如何设计他们的网站的一种非常有启发性和可笑的方式。

网站如何使元素在所有设备上的缩放比例相同并在缩放时缩放？

How do websites make an element scale the same on all devices and scale on zoom?

html

javascript

css

zooming