html - 当 Web 浏览器屏幕尺寸发生变化时，如何更改我的 html 输入字段？

Question

我的网页中有搜索字段，现在我需要在网络浏览器屏幕大小更改时更改大小。

假设最初我有我的网络浏览器屏幕的全尺寸，所以它会根据最大宽度显示，现在当我减小网络浏览器屏幕尺寸时，它也会减少搜索文件的大小，最大为最小宽度。知道我该怎么做吗？这是我尝试过的。

.navbar-search input[type="text"]{
    font-size: 15px;
    height: auto;
    margin-bottom: 05px;
    max-width: 565px;
    min-width: 50px;
}

我在这里找到了一个例子，如果你缩小屏幕尺寸，搜索字段的大小也会改变。 this link

Answer 1

有两种方法可以做到这一点。

一种是简单地使用百分比而不是硬编码像素。如果您在 div 中有一个 input 字段，您可以将输入字段的宽度指定为 div 总宽度的百分比，如下所示:

input {
  max-width: 200x;
  width: 80%;
  min-width: 50px;
}

另一种方法是使用更复杂的 CSS3 media queries .如果您想使用它们，请快速 google search会有帮助。

使用百分比总是比较容易，但无法提供您可能需要的精细控制。明智地选择。