Question

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

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

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

我尝试了什么：

使用固定的最小宽度和最小高度，但它不完全是我想要的。如果宽度/高度百分比高于固定的最小宽度/高度，则元素将不会调整大小，直到缩放％*固定的最小宽度/高度像素计数更大。如果固定的最小宽度/高度像素数高于元素上设置的宽度/高度％，则元素将是固定的最小宽度/高度的大小，并且元素大小在所有监视器上看起来都不相同。
使用固定像素作为宽度/高度会使元素在缩放时调整大小，但在所有显示器上看起来都不一样。
在父div上使用flexbox＆＃34;搜索＆＃34;让孩子输入＆＃34;测试＆＃34;缩放时增大/缩小。似乎没有做任何事情。

注意：如果没有完全查看代码，请不要尝试放大，否则会因为stackoverflow自己的代码而在缩放时进行输入缩放。

＆＃13;

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%;
}

＆＃13;

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

＆＃13;

Answer 1

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

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

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

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

您还可以注意到，它们实际上并没有以完全相同的比例呈现，具体取决于视图端口大小（这是您只想使用基于百分比的大小）。大多数情况下，有一个空的空间（在StackOverflow的情况下两侧）填补空白，而内容具有相同的像素大小，直到视图端口大小变化太大，以至于触发媒体查询，然后应用一组不同的CSS规则，可能完全改变页面布局。

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

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

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

1 个答案: