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

Question

现在，我正在使所有元素具有百分比的宽度和高度，以便无论设备如何，它们都可以缩放相同的比例。例如，无论有人是在 720p 还是 4k 显示器上查看输入元素，它都应该适合整个浏览器。

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

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

我尝试过：

>

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

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

在父 div “搜索”上使用弹性框使子输入“test”在缩放时增长/缩小。似乎什么也没做。

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

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 和 /-”）实际上更改了 font-size： 100%; （相当于 font-size： 1em;） 对应的值。这就是为什么使用此缩放功能时会缩放输入元素内的文本的原因。但是由于输入元素的大小没有改变（请参阅下面的解释），因此看起来后者变小了......而事实上，是它的内部文本变得更大了。

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

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

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

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

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

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