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

Question

我想让我的输入框宽度变小，更像是在浏览器缩小时缩小宽度，在浏览器放大时变宽，因为我的内容重叠。

当我缩小时，我的内容开始重叠。第一张图片是 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;
}

LOGIN/REGISTER HTML

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

LOGIN/REGISTER CSS

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

Answer 1

由于您的 login/register 样式没有相对大小，您可以使用 @media 根据视口的大小更改大小。这将无视最大视口大小。

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

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

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

Make input box width smaller when browser is zoomed with css only

html

css

input

zooming