1

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

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

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

这里我找到了一个例子，如果你缩小屏幕尺寸，搜索栏的尺寸也会改变。这个链接

4

5 回答 5

5

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

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

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

另一种方法是使用更复杂的CSS3 媒体查询。如果你想使用它们，快速谷歌搜索会有所帮助。

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

于 2013-03-06T18:16:24.993 回答
4

他们正在使用@media 查询来做到这一点

CSS：

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

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

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

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

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

于 2013-03-06T17:32:51.683 回答
1

我想说想想其他选项（而不是 div、css 和 @media），比如Twitter bootstrap。

它带有响应式 css bootstrap-responsive.css，如关于您的问题，请查看此链接，您有多种选择form。

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

于 2013-03-06T21:58:06.173 回答
1

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

于 2013-03-06T17:24:32.310 回答
1

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

.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>

于 2020-10-08T08:20:57.133 回答