移动端适配是一个经常聊到的话题，为什么要移动端适配呢？

1、为什么要移动端适配？

一般情况下设计师都以375或750的尺寸进行设计，但是现在移动终端（就是手机）快速更新的时代，每个品牌的手机有着不同的 物理分辨率 和 逻辑分辨率，一份设计稿尺寸要适用所有不同尺寸的手机，如果是固定尺寸写法，右边自适应，就会出现留白或是超出现象。

适配核心

以h5的适配，其核心是以设计稿为准的页面，在不同尺寸的移动端进行屏幕宽度同比例的缩放。例如iphone 6的屏幕尺寸为375px，而iphone 6 plus的屏幕尺寸为414px，那么以iphone 6设计的页面，在iphone 6 plus下被放大 414/375 的比例。

2、如何适配

- viewport

详细文档：请查看 移动端 viewport 详解

在 PC 端，视口指的是浏览器的可视区域，其宽度和浏览器窗口的宽度保持一致。
而移动端则较为复杂，它涉及到三个视口：

  • 布局视口（Layout Viewport）：指DOM宽度
  • 视觉视口（Visual Viewport）：指屏幕宽度
  • 理想视口（Ideal Viewport）：使布局视口就是视觉视口即为理想适口

布局视口 是为了解决屏幕太小需要放缩来查看网页，但是布局视口一般都是大于视觉视口，缺点是会出现横向滚动条。
理想视口 是为了解决布局视口遗留问题横向滚动条，使布局视口就是视觉视口即为理想适口。

- 早期适配方案

早期也有一些适配方案，但是有一些弊端，如：固定宽度、响应式、设置viewport进行缩放。

  • 固定宽度：超出固定尺寸部分会留白
  • 响应式：工作大，维护性难，一般都是中小型的门户或者博客类站点会采用响应式的方法
  • 设置viewport进行缩放：放缩后有些页面元素会糊

- rem适配

rem 是CSS3新增的一个相对单位（root em，根em），这个单位与em有什么区别呢？ rem 是相对大小单位，rem 相对的是HTML根元素；它可以做到只修改根元素就成比例地调整所有字体大小。 em 是相对大小单位，相对于当前对象内文本的字体尺；em会继承父级元素的字体大小。

以 rem 适配的方式，将屏幕划分为100等分，其中10等分为html标签的font-size的值，那么设计稿中的px单位转换成rem将以该10等分为基准转换即 10等分 * x rem = 设计稿中的值 px。

postcss-pxtorem

将css中的px转为rem单位 的 PostCSS 插件，用了它就不用自己计算rem值了。和 px2rem 效果一样。

px2rem

该插件能够让你使用设计稿中的尺寸直接写入项目，不必手动计算转换rem，自动将样式中px单位的数据转换成rem单位的数据，px2rem是postCss的插件。
若设计稿的尺寸为750px，则将设置remUnit为75。设计稿的尺寸为375px，那么设置remUnit为37.5。

flexible.js

这个库在其他js引入前使用，可以将html标签的font-size设置为当前视窗宽度相关的值，并且设置meta viewport。·
以 iphone 6 为例，其屏幕独立像素为 375px，window.devicePixelRatio为2，则设置font-size为75px，其meta标签为”initial-scale=0.5,maximum-scale=0.5,minimum-scale=0.5,user-scalable=no”。

amfe-flexible

amfe-flexible：根据设备宽度，修改根元素html的大小，以适配不同终端

- vw适配

vw 适配方式和 rem 方案类似，区别在于，vw单位是以视窗宽度为基准计算的即1vw为视窗宽度的1%，而此时并不需要设置 html 标签的 font-size 了。同理，设计稿中的 px 单位转换成 vw 将以 视窗宽度的1% 为基准转换即 1等分 * x vw = 设计稿中的值 px。

postcss-px-to-viewport

该插件能够让你使用设计稿中的尺寸直接写项目，不必手动计算转换 vw，自动将样式中px单位的数据抓换成vw单位的数据。
若设计稿的尺寸为750px，则viewportWidth配置为750。设计稿中的尺寸为375px，那么viewportWidth设置为375。

- px为主，vw为辅，搭配flex

之所以推荐使用此种方案，是由于我们要去考虑用户的需求，用户之所以去买大屏手机，不是为了看到更大的字，而是为了看到更多的内容。

4、两种像素（物理像素 、CSS 像素）

在CSS中我们一般使用px作为单位，CSS样式里面的px和物理像素并不是相等的。在PC端，CSS的1px一般对应着电脑屏幕的1个物理像素，但在移动端，CSS的1px等于几个物理像素是和屏幕像素密度有关的。

物理像素（设备像素，device pixels）

物理像素是设备（电脑、手机屏幕）最小的物理显示单位，任何设备的物理像素数量都是固定的。每个物理像素由颜色值和亮度值组成。所谓的一倍屏、二倍屏(Retina)、三倍屏，指的是设备以多少物理像素来显示一个CSS像素。在普通屏幕下1个CSS像素对应1个物理像素，而在Retina屏幕下，1个CSS像素对应的却是4个物理像素。

CSS 像素（CSS pixels）

是 CSS 和 JS 中使用的是一个抽像的单位，主要使用在浏览器上，用来精确度量Web页面上的内容。

设备像素比(device pixel ratio)

设备像素比简称为dpr，定义了物理像素和设备独立像素的对应关系：
设备像素比(devicePixelRatio) ＝ 物理像素 / 设备独立像素。
CSS的1px等于几个物理像素，除了和屏幕像素密度dpr有关，还和用户缩放有关系。

  • 例如，当用户把页面放大一倍，那么CSS中1px所代表的物理像素也会增加一倍；反之把页面缩小一倍，CSS中1px所代表的物理像素也会减少一倍。
  • 例如，在Retina屏的iphone上，devicePixelRatio的值为2，也就是说1个css像素相当于2个物理像素。但是要注意的是，devicePixelRatio在不同的浏览器中还存在些许的兼容性问题。

5、图片模糊问题

一个位图像素是栅格图像(如：png, jpg, gif等)最小的数据单元。每一个位图像素都包含着一些自身的显示信息(如：显示位置，颜色值，透明度等)。理论上，1个位图像素对应于1个物理像素，图片才能得到完美清晰的展示。

  • 对于dpr=2的Retina屏幕而言，1个位图像素对应于4个物理像素，由于单个位图像素不可以再进一步分割，所以只能就近取色，导致图片看起来比较模糊。
  • 将二倍图显示在普通屏上，就出现一个物理像素点对应4个位图像素点，就如同将但它的取色也只能通过一定的算法取某一个位图像素点上的色值。这个过程叫做(downsampling)，肉眼看上去虽然图片不会模糊，但是会觉得图片缺少一些锐利度，或者是有点色差。

位图像素点个数和物理像素点个数形成 1 : 1的比例，图片自然就清晰了

6、1px细线问题

CSS像素为1px宽的直线，对应的物理像素是不同的，可能是2px或者3px,而设计师想要的1px宽的直线,其实就是1物理像素宽。

  • 方案：构建1个伪元素, border为1px, 再以transform缩放到50%。


    7、为什么设计稿都是750px

  • 手机像素单位 pt (point，磅)：又称逻辑像素，跟网页用的css像素一样，css像素只是一个抽象的概念。

  • 由于iphone是2倍高清屏，以手机iphone6尺寸为基准，对应的手机像素为 375pt，物理像素为750px，直接用750的设计稿上的图片 也可以直接用，显示的更清楚（图片模糊问题）。
  • 听一个大神说是因为人用肉眼睛能分辨出的最大分辨率就是@2x即750*1334，而@3x已经超过人肉眼分辨的极限了

参考文档：

插件