仅使用 css 缩放浏览器时使输入框宽度变小答案

【问题标题】：Make input box width smaller when browser is zoomed with css only仅使用 css 缩放浏览器时使输入框宽度变小
【发布时间】：2020-09-02 14:16:33
【问题描述】：

我想让我的输入框宽度变小，就像缩小浏览器时缩小的宽度一样，当浏览器放大时变宽，导致我的内容重叠。

当我缩小我的内容开始重叠。第一张图片是 100% 缩放，浏览器默认。

当我放大到 110% 时

当我放大到 125% 时

如何让搜索栏在缩小 100% - 110% 时缩小，并在放大 125% 放大 -> 100% 放大时增大

我尝试过的。

<div class="example-navigation-bar-two">
   <input type="text" class="example-navigation-bar-two-input"   placeholder="Search any food item on Example...">
</div>

和我的 CSS

.example-navigation-bar-two{
  width:68%;    
}   
.example-navigation-bar-two-input{
  display: -webkit-box;
  display: -moz-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  position: relative;
  float: none;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: #fff;
  border-top: 1px solid #f3f3f3;
  border-bottom: 1px solid #f3f3f3;
  border-left:0px;
  border-right:0px;
  background-repeat: repeat-x;
  white-space: nowrap;
  padding-top:3px;
  padding-left:5px;
  padding-right:5px;
  width:100%;
  height:31.2px;
}

<div class="sharyor-navigation-bar-two">
  <div class="sharyor-hundred-percent">
    
    <div class="sharyor-right-one">
      <a href="">
        <div><i class="fa fa-user-o"></i></div>
        <span>Login/Register</span>
      </a>
    </div>
    
    <div class="sharyor-right-two">
      <a href="">
        <div><i class="fa fa-heart-o"></i></div>
        <span>Wish to buy</span>
      </a>
    </div>
    
    <div class="sharyor-right-three">
      <a href="">
        <div><i class="fa fa-shopping-basket"></i></div>
        <span>Cart</span>
      </a>
    </div>
    
  </div>
</div>

.sharyor-navigation-bar-two{
  z-index:1000;
  right:0;
  margin-right:15px;  
  display:flex;
  position:absolute;
}
.sharyor-hundred-percent{
  width:100%;
  position:relative;
  display:flex;
}
.sharyor-right-one{
  padding-right:20px; 
}
.sharyor-right-two{
  padding-right:20px; 
}
.sharyor-right-three{
  padding-right:15px; 
}

【问题讨论】：

你能再添加一些显示 login/register 等文本及其样式的 html 吗？
@DebsmitaPaul 好的
@DebsmitaPaul 完成编辑。

标签： html css input zooming

【解决方案1】：

由于您的登录/注册样式没有相对大小，您可以使用@media 根据视口大小更改大小。这将在忽略最大视口大小的情况下起作用。

@media screen and (width < 800px){
   .example-navigation-bar-two-input{
       /* change size here */
   }
}

【讨论】：

【解决方案2】：

要添加到上面接受的答案，这应该捕获 110%、125% 和 150% ZOOM。

@media (max-width: 1300px) {
.example-navigation-bar-two-input{{
width:62%;  
}
}
@media (max-width: 1100px) {
.example-navigation-bar-two-input{{
width:51%;  
}
}
@media (max-width: 1000px) {
.example-navigation-bar-two-input{{
width:30%;  
}
}

【讨论】：