Question

我的网页上有搜索字段，现在我需要在网页浏览器屏幕尺寸更改时更改尺寸。

让我们说最初我的网页浏览器屏幕已经全尺寸，所以它会根据最大宽度显示，现在当我减少网页浏览器的屏幕尺寸时，它也会缩小搜索字段大小，直到最小宽度。任何想法我怎么能这样做？，这就是我尝试过的。

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

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

Answer 1

他们正在使用@media查询

CSS：

@media (max-width: 480px){
    /* ... */
    .header .search-query{width:100px}
}

然后，他们使用不同的@ media-queries为不同的上下文重新格式化输入宽度

@media (max-width: 680px){
    /* ... */
    .header .search-query{width:150px}
}

媒体查询是一个CSS3模块，允许内容呈现适应屏幕分辨率等条件（例如智能手机与高清屏幕）。它于2012年6月成为W3C推荐标准。1并且是响应式网页设计的基石技术。

媒体查询由媒体类型和至少一个表达式组成，该表达式通过使用媒体功能（如宽度，高度和颜色）来限制样式表的范围。在CSS3中添加了媒体查询，可以根据特定范围的输出设备定制内容，而无需更改内容本身。

Answer 2

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

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

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

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

使用百分比总是更容易，但不会为您提供您可能需要的精确控制。明智地选择。

Answer 3

您需要设置最大宽度，最小宽度和宽度，该宽度具有百分比，而不是设定值。（宽度：75％，而不是75px）

Answer 4

我想要考虑其他选项（而不是div，css和@media），如Twitter bootstrap。

它附带了响应式广告管理系统bootstrap-responsive.css，关于您的问题，请检查this link，form有多个选项。

您可以将屏幕尺寸调整到手机屏幕，但布局工作正常。

Answer 5

在创建容器之前使用百分比宽度，确保容器溢出，先显示为块，然后显示为静态。

.card {padding: 20px;} /*create container first*/
.search-container {overflow: hidden; border: 1px solid grey; background: white; display: block ; border-radius: 15px;}
.search-container input[type=text] {position: static; border: 1px dotted red; height: 30px; width: 90%; outline: none;}
/*you can set border to 'none'*/
/*Adjust width% in last css you like, incase you put icon*/

<div class="card">
  <div class="search-container">
    <form>
     <input type="text" maxlength="50" placeholder="Search.." name="search">
      </form>
  </div>
</div>

当Web浏览器屏幕大小发生变化时，如何更改html输入字段？

5 个答案: