【前端】移动端适配与响应式布局

移动端适配

• 核心目标

项目	说明
页面在手机上无横向滚动	布局自适应不同宽度
文本、按钮大小合适	不能太小，防止用户误触
响应式菜单/聊天面板	支持折叠展开，适配屏幕空间
虚拟键盘弹出不影响布局	特别是输入框底部，注意滚动与缩放行为
支持手势滑动/滚动触感优化	提升使用体验

• 实现方案

1. 必须设置 viewport

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
<!-- 以设备宽度为准，不允许用户缩放
-->

媒体查询 media query

媒体查询里只需要写与基础样式不同、需要覆盖或调整的部分
如果某条样式在基础样式里已经定义，且在媒体查询条件下不变，完全没必要重复写

查询条件	说明
min-width	视口宽度大于等于指定值时生效
max-width	视口宽度小于等于指定值时生效
min-height	视口高度大于等于指定值时生效
max-height	视口高度小于等于指定值时生效
orientation	portrait（竖屏）或 landscape（横屏）
aspect-ratio	宽高比，例如 16/9
resolution	分辨率（如 min-resolution: 2dppx）

还可以结合and only not关键词

媒体类型

外链式引入

.container {
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 4%;
}
@media [条件] {
  /* 条件成立时生效的样式 */
}

/* 小屏设备（最大宽度 768px） */
@media screen and (max-width: 768px) {
  .sidebar { display: none; }
  .chat-box { padding: 10px; }
}
/* 针对屏幕宽度小于 768px 的设备（如手机） */
@media (max-width: 768px) {
  body {
    font-size: 14px;
  }
}
/* 针对屏幕宽度小于 480px 的设备（如小型手机） */
@media (max-width: 480px) {
  body {
    font-size: 12px;
  }
}

响应式布局

1. flex/grid +百分比%

/*flex*/
.container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.item {
  flex: 1 1 30%;  /* 使每个项目占容器宽度的 30% */
  margin: 10px;
}

/* 针对小屏幕设备 */
@media (max-width: 768px) {
  .item {
    flex: 1 1 100%;  /* 让每个项目占满一行 */
  }
}

/*grid*/
.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);  /* 创建 3 列 */
  gap: 10px;
}

/* 针对小屏幕设备 */
@media (max-width: 768px) {
  .grid-container {
    grid-template-columns: 1fr;  /* 变为单列布局 */
  }
}

2. 补充：什么时候才适合用grid？在合适的地方使用 grid 会让布局更简洁、高效，不会比 flex 更容易触发重排重绘。
   实际开发中可采用flex+grid搭配

使用 Grid 的场景	建议
页头/主区/侧栏整体布局	非常推荐使用 Grid
卡片式展示（多行多列，自适应）	非常适合 Grid
聊天 UI、线性流内容（左-右、上-下结构）	用 Flex 更自然
内容动态频繁变化，需微调、动画	🧠 用 Flex 或 absolute 更可控

3. 响应式图片和文字大小
   使用 srcset 和 sizes 属性来为不同的屏幕分辨率和设备尺寸提供不同大小的图片，以减少加载时间。
   srcset：定义不同分辨率的图片文件。
   sizes：根据屏幕宽度指定图片显示的尺寸。

<img src="small.jpg" 
     srcset="large.jpg 1024w, medium.jpg 768w, small.jpg 320w" 
     sizes="(max-width: 768px) 100vw, 50vw" 
     alt="Responsive Image">
<!-- 
large.jpg 1024w：浏览器可以选择加载 large.jpg 图片，宽度为 1024 像素（1024w）。
medium.jpg 768w：浏览器可以选择加载 medium.jpg 图片，宽度为 768 像素（768w）。
small.jpg 320w：浏览器可以选择加载 small.jpg 图片，宽度为 320 像素（320w）。
w 其实是 相对单位，它是针对图片本身的宽度指定的，告诉浏览器这个图片在文件系统中的宽度。
-->

4. 使用flexible.js配合rem实现在不同宽度的设备中，网页元素尺寸等比缩放效果。flexible.js是手淘开发出的一个用来适配移动端的js框架。核心原理就是根据不同的视口宽度给网页中html根节点设置不同的font-size。

/* 移动适配 */
/* 
1. HTML标签加字号 1/10; 
2. 写rem单位的尺寸 
*/
.box {
    /* 68 * 29 */
    /* width: 68px; */
    /* 设计稿375, HTML 37.5   68/37.5 */
    width: 1.813rem;
    height: 0.773rem;
    background-color: pink;
}

• 实践
  小屏幕到大屏幕：从小屏幕（如手机）开始设计布局，逐步为较大的设备添加样式。这是因为手机用户占比逐年增加，所以将移动端作为设计的基础，逐渐向上适配会更为合理。

单位选择

• 不推荐px+fixed写死布局，适配性差

类型	推荐单位	原因
字体大小	rem	根据根节点动态调整大小
间距、宽度	% / vw / rem	自适应屏幕变化
绝不推荐	px	不随设备缩放

tailwind响应式工具类

Tailwind 默认是“移动优先”的响应式框架

类别	说明	最小宽度
sm	手机	≥ 640px
md	平板	≥ 768px
lg	小笔电	≥ 1024px
xl	桌面显示器	≥ 1280px

<div className="p-2 sm:p-4 md:p-6">
  {/* 小屏 padding: 0.5rem；中屏以上自动增加 */}
</div>

关于 Bootstrap

1. Bootstrap 是一个 UI 框架，不是适配方案的唯一选择。Bootstrap 作为框架可以看成是用这些核心技术封装起来的。Bootstrap 其实是包含一整套响应式网格系统、组件和样式的前端框架，它确实自带响应式设计的理念和实现。但它本质是一个工具，而非“适配的必经方案”。
2. Bootstrap 体积较大，不一定适合所有项目
   尤其是移动端页面，性能很重要。Bootstrap 引入了大量 CSS 和 JavaScript，对于轻量级项目或对性能敏感的场景，可能并非最佳选择。
3. 很多现代项目倾向使用更灵活、轻量的方案
   现在越来越多开发者选择用 Tailwind CSS、纯 CSS Flexbox/Grid、或者自己写媒体查询来实现响应式布局，而不是套用一个完整的 UI 框架。这样更灵活、可控。

测试调试

工具	用法
Chrome DevTools	F12 → 设备模拟（iPhone等）
本地手机 + 局域网访问	手机连接 Wi-Fi，用 IP 访问
BrowserStack	云端设备测试