j移动端适配是指在不同尺寸的手机设备上，页面能相对达到合理的展示（响应式）或者保持统一效果的等比缩放（看起来差不多）。
1、硬件概念
屏幕尺寸
屏幕分辨率（物理分辨率、设备分辨率）
设备像素（物理像素）
像素密度（Pixels Per Inch）
2、适配的几种可行方案
媒体查询
通过 CSS 的 @media 媒体查询设置不同的 style。通过媒体查询，我们可以根据不同屏幕设置不同样式，这样就可以实现不同屏幕的适配。
link 元素中的 CSS 媒体查询，不同屏幕加载不同样式文件：
<link rel="stylesheet" media="(max-width: 500px)" href="mobile.css" />
<link rel="stylesheet" media="(min-width: 980px)" href="pc.css" />动态 rem 方案
这种是在开发中常用的方案。
采用 rem 为单位设置元素大小。对于不同屏幕，我们只需要动态修改根元素字体大小，元素大小就会同比例改变，从而做到页面的自动适配效果。例如，假设设计稿宽度为 750px，元素A宽度为 300px，在屏幕宽度为 375pt 的屏幕中，设置根元素字体大小为 37.5px，则元素A宽度为 4rem；在屏幕宽度为 750pt 的屏幕中，只需将根元素字体大小改为 75px，不需要改变元素A的大小，就可以做到页面适配。
在上述方案中，j
我们需要将设计稿中的 px 转化为 rem，如果每一次都需要自己计算 px 转换 rem，就太麻烦了。为了简化改过程，衍生出很多 px 转换 rem 的小工具。其中使用最为广泛的是 postcss-px2rem 。使用该用具，在实际开发中直接按照设计稿写 px 就可以了
.selector {
width: 150px;
height: 64px; /*px*/
font-size: 28px; /*px*/
border: 1px solid #ddd; /*no*/
}即可改为
.selector {
width: 2rem;
border: 1px solid #ddd;
}
[data-dpr="1"] .selector {
height: 32px;
font-size: 14px;
}
[data-dpr="2"] .selector {
height: 64px;
font-size: 28px;
}
[data-dpr="3"] .selector {
height: 96px;
font-size: 42px;
}总的来说
总结一下，使用动态 rem 方案需要做的工作：
- meta 标签设置 viewport 宽度为屏幕宽度；
- 根据不同屏幕修改根元素 font-size 大小，一般设置为屏幕宽度的十分之一（可引入 lib-flexible 库，或者自己写相应逻辑）；
- 开发环境配置 postcss-px2rem 或者类似插件；
- 根据设计稿写样式，元素宽高直接取设计稿宽高即可，单位为 px，插件会将其转换为 rem；
- 段落文本也按照设计稿写，单位为px，不需要转换为 rem
