search-bar-wrapper 必须用 Flexbox 布局以确保 input 与 button 横向并排且自适应；小屏下改 flex-direction: column 并调整宽高；需正确设置 viewport meta、图标对齐及父容器约束。
search-bar-wrapper 必须用 flex 布局，不能靠 float 或 inline-block
float:right 会把 input 拉出文档流，导致 button 无法对齐；inline-block 在小屏下受空格/换行符影响，间距不可控。Flexbox 是唯一能稳定维持输入框与按钮横向并排、且自动撑满容器的方案。
实操建议：
- 给
search-bar-wrapper设display: flex和align-items: center，避免因行高或字体差异造成垂直偏移 - 禁用
input和button的默认 margin/padding 差异（Chrome 和 Safari 对button的默认 padding 不一致） - 设
flex: 1给input，让它在空间不足时收缩，而不是溢出或换行 - 按钮固定宽度（如
width: 44px），确保触控区域 ≥ iOS 最小要求
@media 中不要只改 display，要重置 flex-direction 和 width
小屏下横向空间紧张，强行保持 flex-direction: row 会导致文字截断或按钮被挤出视口。单纯把 display 改成 block 又会丢失弹性控制能力。
正确做法是保留 Flexbox，只切换方向和尺寸分配逻辑：
立即学习“前端免费学习笔记（深入）”；
- 在
@media (max-width: 768px)内设flex-direction: column，让input和button垂直堆叠 -
input改为width: 100%，消除右侧空白 - 按钮加
margin-top: 0.5rem，避免紧贴输入框底部（视觉呼吸感） - 若搜索栏嵌在
header内，记得同步调整header的padding，否则小屏会出现左右留白不一致
viewport meta 错误会让所有媒体查询失效
哪怕 CSS 写得再准，没写或写错 <meta name="viewport">，@media 规则在移动端根本不会触发。iOS Safari 默认按 980px 渲染，你设 @media (max-width: 480px) 它压根看不见。
必须且仅用这一行：
<meta name="viewport" content="width=device-width, initial-scale=1.0">
常见错误：
- 漏掉
initial-scale=1.0→ 页面加载后自动缩放，用户看到的是缩小版布局 - 加了
maximum-scale=1.0→ 禁用双击放大，违反 WCAG 可访问性要求 - 写成
width=1200→ 视口被锁死，不管设备多小都按 1200px 渲染
图片图标在 search-button 里要设 height:auto 和 vertical-align:middle
用 <i class="fa fa-search"> 或 SVG 时，如果没处理内联元素基线对齐，按钮内容会下沉——尤其在 Firefox 和旧版 Edge 中明显。
关键样式：
-
button设line-height: 1，避免文字行高干扰 - 图标类加
vertical-align: middle，而非默认 baseline - SVG 必须设
height: 1em和width: 1em，否则在不同字号下缩放失真 - 禁用
img标签直接放图标（它自带display: inline和默认 margin）
search-bar-wrapper 的父容器有没有设 max-width 或 padding。很多“小屏错位”问题，根源不在搜索栏本身，而是它被塞进一个 width: 1200px 的居中容器里，导致媒体查询生效后，内部 flex 项仍被外层硬约束挤压变形。 
