如何实现响应式搜索栏？现有代码优化方案咨询

嘿，你的搜索栏现在的问题核心在于用了固定像素值（比如width: 700px），这在小屏幕设备上肯定会溢出或者显示异常。我给你两种高效的解决方案，比单纯检测屏幕宽度要更适配：

方案一：使用视窗宽度单位（vw）—— 最简洁高效的方式 #

视窗单位vw是基于浏览器视窗宽度的相对单位，1vw等于视窗宽度的1%。用它来设置搜索栏focus时的宽度，能自动适配所有屏幕尺寸，不用写一堆媒体查询。

修改你的CSS中input[type="text"]:focus的宽度属性：

input[type="text"]:focus {
  width: 70vw; /* 改为视窗宽度的70%，可根据需求调整比例 */
  z-index: 1;
  border-bottom: 1px solid #BBB;
  cursor: text;
}

同时，你可以把#wrap的固定margin也改成相对单位，避免小屏幕上的布局错乱：

#wrap {
  margin: 5vh 5vw; /* 用视窗高度/宽度单位替代固定像素 */
  display: inline-block;
  position: relative;
  height: 60px;
  float: right;
  padding: 0;
}

另外，输入框的字体大小font-size: 55px在小屏幕上也会过大，同样可以用vw调整：

input[type="text"] {
  height: 60px;
  font-size: 6vw; /* 基于视窗宽度的字体大小，自动缩放 */
  /* 其他原有属性保持不变 */
}

方案二：CSS媒体查询—— 精准适配特定断点 #

如果你需要针对不同尺寸的屏幕做更精细的调整（比如在手机上让搜索栏几乎占满屏幕，平板上占70%，桌面保持固定宽度），可以用媒体查询：

/* 默认桌面端样式 */
input[type="text"]:focus {
  width: 700px;
}

/* 平板设备（小于1024px） */
@media (max-width: 1024px) {
  input[type="text"]:focus {
    width: 60vw;
  }
}

/* 手机设备（小于768px） */
@media (max-width: 768px) {
  input[type="text"]:focus {
    width: 90vw;
    font-size: 28px;
  }
  #wrap {
    margin: 20px 15px;
  }
}

两种方案对比 #

• 视窗单位方案：代码更简洁，无需关心具体断点，自动适配所有屏幕，适合大多数场景。
• 媒体查询方案：可以针对特定设备做定制化调整，灵活性更高，适合有特殊布局需求的场景。

修改后的完整CSS代码（以视窗单位方案为例） #

@import url(https://fonts.googleapis.com/css?family=Lato:100,300,400,700); 
@import url(https://raw.github.com/FortAwesome/Font-Awesome/master/docs/assets/css/font-awesome.min.css); 

#wrap {
  margin: 5vh 5vw;
  display: inline-block;
  position: relative;
  height: 60px;
  float: right;
  padding: 0;
}

input[type="text"] {
  height: 60px;
  font-size: 6vw;
  display: inline-block;
  font-family: "Lato";
  font-weight: 100;
  border: none;
  outline: none;
  color: #555;
  padding: 3px;
  padding-right: 60px;
  width: 0px;
  position: absolute;
  top: 0;
  right: 0;
  background: none;
  z-index: 3;
  transition: width .4s cubic-bezier(0.000, 0.795, 0.000, 1.000);
  cursor: pointer;
}

input[type="text"]:focus:hover {
  border-bottom: 1px solid #BBB;
}

input[type="text"]:focus {
  width: 70vw;
  z-index: 1;
  border-bottom: 1px solid #BBB;
  cursor: text;
}

input[type="submit"] {
  height: 67px;
  width: 63px;
  display: inline-block;
  color:red;
  float: right;
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAMAAABg3Am1AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAADNQTFRFU1NT9fX1lJSUXl5e1dXVfn5+c3Nz6urqv7+/tLS0iYmJqampn5+fysrK39/faWlp////Vi4ZywAAABF0Uk5T/////////////////////wAlrZliAAABLklEQVR42rSWWRbDIAhFHeOUtN3/ags1zaA4cHrKZ8JFRHwoXkwTvwGP1Qo0bYObAPwiLmbNAHBWFBZlD9j0JxflDViIObNHG/Do8PRHTJk0TezAhv7qloK0JJEBh+F8+U/hopIELOWfiZUCDOZD1RADOQKA75oq4cvVkcT+OdHnqqpQCITWAjnWVgGQUWz12lJuGwGoaWgBKzRVBcCypgUkOAoWgBX/L0CmxN40u6xwcIJ1cOzWYDffp3axsQOyvdkXiH9FKRFwPRHYZUaXMgPLeiW7QhbDRciyLXJaKheCuLbiVoqx1DVRyH26yb0hsuoOFEPsoz+BVE0MRlZNjGZcRQyHYkmMp2hBTIzdkzCTc/pLqOnBrk7/yZdAOq/q5NPBH1f7x7fGP4C3AAMAQrhzX9zhcGsAAAAASUVORK5CYII=) center center no-repeat;
  text-indent: -10000px;
  border: none;
  position: absolute;
  top: 0;
  right: 0;
  z-index: 2;
  cursor: pointer;
  opacity: 0.4;
  transition: opacity .4s ease;
}

input[type="submit"]:hover {
  opacity: 0.8;
}

HTML部分保持不变即可：

<div id="wrap">
  <form action="" autocomplete="on">
    <input id="search" name="Zoek" type="text" placeholder="U zoekt?"><input id="search_submit" value="Verstuur" type="submit">
  </form>
</div>

内容的提问来源于stack exchange，提问作者user2037412