响应式设计（Responsive Web Design）
1. 什么是响应式设计
响应式网站设计（Responsive Web design）是一种网络页面设计布局，页面的设计与开发应当根据用户行为以及设备环境（系统平台、屏幕尺寸、屏幕定向等）进行相应的响应和调整。
描述响应式界面最著名的一句话就是 "Content is like water"。大白话便是"如果将屏幕看作容器，那么内容就像水一样"。
响应式网站的常见特点：同一套代码适配多端、多分辨率；图片、字体、布局都会随着屏幕尺寸动态调整。
2. 如何实现
响应式设计的基本原理是通过媒体查询检测不同的设备屏幕尺寸做处理，为了处理移动端，页面头部必须有 meta 声明 viewport：
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
实现响应式布局的方式主要有：媒体查询、百分比、rem/vw、flex、grid 等。
媒体查询
CSS3 中增加了更多的媒体查询，就像 if 条件表达式一样，我们可以设置不同类型的媒体条件，并根据对应的条件，给相应符合条件的媒体调用相对应的样式表。
使用 @media 查询，可以针对不同的媒体类型定义不同的样式，如：
@media screen and (max-width: 1920px) { /* ... */ }
当视口在 375px - 600px 之间，设置特定字体大小 18px：
@media screen and (min-width: 375px) and (max-width: 600px) {
body {
font-size: 18px;
}
}
通过媒体查询，可以给不同分辨率的设备编写不同的样式来实现响应式的布局，比如为不同分辨率的屏幕设置不同的背景图片。
rem + 媒体查询
rem 是相对于根元素 html 的 font-size 属性，默认情况下浏览器字体大小为 16px，此时 1rem = 16px。
可以利用前面提到的媒体查询，针对不同设备分辨率改变 font-size 的值：
@media screen and (max-width: 414px) {
html {
font-size: 18px;
}
}
@media screen and (max-width: 375px) {
html {
font-size: 16px;
}
}
@media screen and (max-width: 320px) {
html {
font-size: 12px;
}
}
rem + JS 动态设置（推荐）
为了更准确监听设备可视窗口变化，可以在 css 之前插入 script 标签：
// 动态为根元素设置字体大小
function init() {
// 获取屏幕宽度
var width = document.documentElement.clientWidth;
// 设置根元素字体大小。此时为宽的 10 等分
document.documentElement.style.fontSize = width / 10 + 'px';
}
// 首次加载应用，设置一次
init();
// 监听手机旋转的事件的时机，重新设置
window.addEventListener('orientationchange', init);
// 监听手机窗口变化，重新设置
window.addEventListener('resize', init);
无论设备可视窗口如何变化，始终设置 rem 为 width 的 1/10，实现了百分比布局。
3. 优缺点
优点：
- 一套代码适配多端，降低开发与维护成本；
- 用户体验好，无需下载不同客户端；
- 对搜索引擎友好（统一 URL）。
缺点：
- 移动端流量不一定比 PC 少（需要按需加载资源）；
- 代码冗余较多，所有终端共享同一份资源；
- 复杂的响应式布局会增加开发与测试成本；
- 极端情况下浏览器兼容性（老 IE）问题需要兼容方案。
补充：响应式设计的现代替代方案是"移动优先 + 容器查询（Container Queries）"，它不再以 viewport 而是以容器尺寸为断点，更适合组件化场景。
