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

现在，我正在制作所有元素的宽度和高度百分比，以便它们可以在不考虑设备的情况下缩放相同的比例。例如，无论有人是在720p还是4k监视器上查看输入元素，浏览器中的输入元素都应该相同

现在我的问题是，我试图使我的元素随着缩放的增加或减少而缩放（浏览器缩放：ctrl和+/-），但因为我使用的是宽度和高度的百分比，所以元素不会缩放。事实上，当我放大输入时，我不知道为什么会变小。当你放大其他网站的输入时，它们的宽度和高度都会变大。缩小时，元素会变小

这样做的正确方式是什么？显然，这是可以做到的，因为我访问的每个站点，包括stackoverflows元素（例如搜索输入），在查看时看起来大小相同，在缩放时高度和宽度都会缩放

我所尝试的：

使用固定的最小宽度和最小高度，但这并不是我想要的。如果宽度/高度百分比高于固定最小宽度/高度，则在缩放%*固定最小宽度/高度像素计数大于之前，元素不会调整大小。如果固定最小宽度/高度像素计数高于元素上设置的宽度/高度%，则元素的大小将为固定最小宽度/高度，并且元素大小在所有监视器上看起来不一样

使用固定的像素作为宽度/高度将使元素在缩放时调整大小，但在所有显示器上看起来不一样

在父div“search”上使用flexbox使子输入“test”在缩放时增长/收缩。似乎什么都没做

注意：在没有完全查看代码的情况下不要尝试放大，否则它会在放大时由于stackoverflow自己的代码而产生输入比例

html，正文{
宽度：100%；
身高：100%；
边际：0px；
}
分区#主容器{
身高：100%；
宽度：100%；
背景颜色：橙色；
}
分区搜索{
位置：相对位置；
最高：50%；
保证金：自动；
身高：5%；
宽度：35%；
}
输入测试{
位置：相对位置；
宽度：100%；
身高：100%；
}

浏览器缩放（使用“Ctrl和+/-”）实际上会更改

字体大小：100%的值（相当于
字体大小：1em；
）对应于。这就是为什么使用此缩放功能时会缩放输入元素中的文本。但是由于输入元素的大小没有改变（见下面的解释），后者看起来会变小。。。然而事实上，它的内部文本变得更大

据我所知，这样做是为了让访问者有机会阅读文本（同时可能破坏页面布局），如果出于某种原因，他们对网站设计师选择的文本大小有困难的话

对于输入元素的大小，由于您是相对于其容器的大小（使用百分比）来定义它的，直到拥有100%视图端口的主体，因此您没有给它任何机会通过此功能进行缩放，而是让它依赖于视图端口的大小。因此，如果调整视图端口（即浏览器窗口）的大小，您将看到图元大小发生更改，但不会看到其内部文本。这听起来像是你一开始想要的（在不同的设备上以完全相同的比例渲染，实际上在不同的视图端口大小上），但今天的网站所做的实际上是一种完全不同的技术

他们所做的被称为“响应式设计”，即CSS使用“媒体查询”，可以检测设备类型、屏幕大小（实际查看端口大小）等。这些媒体查询充当CSS规则的条件块。典型的用例是当屏幕足够宽时在一侧呈现一个大菜单，但当屏幕较窄时仅呈现一个菜单按钮

您还可以注意到，根据视图端口大小，它们实际上并没有以完全相同的比例进行渲染（这是您仅使用基于百分比的大小所要做的）。大多数情况下，会有一个空白空间（在StackOverflow的情况下，在两侧）来填补空白，而内容的大小（以像素为单位）是相同的，直到视图端口大小变化如此之大以至于触发媒体查询，然后应用一组不同的CSS规则，可能会完全改变页面布局

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

最后，我鼓励您使用大多数浏览器所特有的开发工具的DOM和样式检查器（点击F12打开开发工具）。它们通常还提供元素选择器，允许您在页面上精确定位要查看其确切DOM和应用样式规则的元素。这是一个非常有教育意义和荒谬的方式来了解别人如何设计他们的网站
 这无疑是我所寻找的最需要的信息广度。您是否有任何关于“响应性设计”的推荐材料，以便我可以更深入地尝试让这些元素实现我希望它们实现的功能？还可以使用弹性框来缩放元素吗？我知道flex Box是“响应性设计”的一部分，但我不知道它们是否有特定的用途。对不起，我不知道有什么好的材料可以推荐给你。框架呢？是否有一个广泛使用的框架来帮助实现这一点？