本文主要是介绍移动端屏幕适配 fis3+rem方案，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
移动端多屏适配rem方案
背景
1. 开发移动端H5页面
2. 面对不同分辨率、dpr的手机
3. 面对不同屏幕尺寸的手机
一、概念
1、物理像素(physical pixel)
一个物理像素是显示器(手机屏幕)上最小的物理显示单元，在操作系统的调度下，每一个设备像素都有自己的颜色值和亮度值。
2、设备独立像素(density-independent pixel)
设备独立像素(也叫密度无关像素)，可以认为是计算机坐标系统中得一个点，这个点代表一个可以由程序使用的虚拟像素(比如: css像素)，然后由相关系统转换为物理像素。
所以说，物理像素和设备独立像素之间存在着一定的对应关系，这就是接下来要说的设备像素比。
3、设备像素比(device pixel ratio )
设备像素比（简称dpr）定义了物理像素和设备独立像素的对应关系，它的值可以按如下的公式的得到：
设备像素比 = 物理像素 / 设备独立像素 // 在某一方向上，x方向或者y方向
在javascript中，可以通过window.devicePixelRatio获取到当前设备的dpr。
在css中，可以通过：
-webkit-device-pixel-ratio，
-webkit-min-device-pixel-ratio，
-webkit-max-device-pixel-ratio
进行媒体查询，对不同dpr的设备，做一些样式适配(这里只针对webkit内核的浏览器和webview)。
综合上面几个概念，一起举例说明下：
以iphone6为例：
1. 设备宽高为375×667，可以理解为设备独立像素(或css像素)。
2. dpr为2，根据上面的计算公式，其物理像素就应该×2，为750×1334。
用一张图来表现，就是这样：
上图中可以看出，对于这样的css样式：
width: 2px;
height: 2px;
在不同的屏幕上(普通屏幕 vs retina屏幕)，css像素所呈现的大小(物理尺寸)是一致的，不同的是1个css像素所对应的物理像素个数是不一致的。
在普通屏幕下，1个css像素 对应 1个物理像素(1:1)。
在retina 屏幕下，1个css像素对应 4个物理像素(1:4)。
二、视觉稿要求
1. 现主流的iphone6宽度750px（以前是iphone4的320)
2. 在设计过程中注意兼容最小尺寸（320），如图片中的文字、最小字体等...
问题：
1. 对于dpr=2的手机，为什么画布大小×2，就可以解决高清问题？
2. 对于2倍大小的视觉稿，在具体的css编码中如何还原每一个区块的真实宽高(也就是布局问题)?
三、图片问题
一个位图像素是栅格图像(如：png, jpg, gif等)最小的数据单元。每一个位图像素都包含着一些自身的显示信息(如：显示位置，颜色值，透明度等)。
1、retina下，图片高清问题
解决方案：@2x/@3x，然后图片容器缩小。
2、背景图片问题
解决方案：
width: 200px;
height: 300px;
background-image: url(image@2x.jpg);
background-size: 200px 300px; // 或者: background-size: contain;
缺点：
1. 普通屏幕下同样下载了@2x的图片，造成资源浪费。
2. 普通屏幕下图片由于downsampling，会失去了一些锐利度(或是色差)。
所以最好的解决办法是：不同的dpr下，加载不同的尺寸的图片。
不管是通过css媒体查询，还是通过javascript条件判断都是可以的。
那么问题来了，这样的话，不就是要准备两套图片了嘛？(@1x 和@2x)
我想，做的好的公司，都会有这么一个图片服务器，通过url获取参数，然后可以控制图片质量，也可以将图片裁剪成不同的尺寸。
所以我们只需上传大图(@2x)，其余小图都交给图片服务器处理，我们只要负责拼接url即可。
如，这样一张原图：
https://img.alicdn.com/tps/TB1AGMmIpXXXXafXpXXXXXXXXXX.jpg // 原图
可以类似这样，进行图片裁剪：
// 200×200
https://img.alicdn.com/tps/TB1AGMmIpXXXXafXpXXXXXXXXXX.jpg_200x200.jpg
// 100×100
https://img.alicdn.com/tps/TB1AGMmIpXXXXafXpXXXXXXXXXX.jpg_100x100.jpg
(ps: 当然裁剪只是对原图的等比裁剪，得保证图片的清晰嘛~)
四、border:1px问题
解决方案：border使用1px而非rem单位，且div的盒子模型为：border-box
这大概是前端最敏感，最关心的问题了。
先来，来看看下面的图：
上面两张图分别是在iphone3gs(dpr=1)和iphone5(dpr=2)下面的测试效果，对比来看，对于1px的border的展示，它们是一致的，并无区别。
那么retina显示屏的优势在哪里，设计师为何觉得高清屏下(右图)这个线条粗呢？明明和左右一样的~
还是通过一张图来解释：
上图中，对于一条1px宽的直线，它们在屏幕上的物理尺寸(灰色区域)的确是相同的，不同的其实是屏幕上最小的物理显示单元，即物理像素，所以对于一条直线，iphone5它能显示的最小宽度其实是图中的红线圈出来的灰色区域，用css来表示，理论上说是0.5px。
五、前端布局要求
方案：
使用rem 针对不同手机屏幕尺寸和dpr动态的改变根节点html的font-size大小(基准值)，再使用fis-postprocessor-px2rem插件让px自动转化成rem
1）、配置代码（750px的设计稿）：
fis.match('*css', {
postprocessor: fis.plugin('px2rem', {
baseDpr: 2, // dpr基准
remUnit: 75, // rem 基准，由设计稿决定（750/10）
remPrecision: 6 // rem 精确位数
})；
});
这样fis3就会自动按照750的大小将px转换为rem单位；前端无需自己计算转换；
对于动态改变根节点html的font-size，要求CSS和JS配合使用（解决闪烁问题）。
2）、CSS设置（通过设备宽度来媒体查询来改变html的font-size，即min-device-width/10，与fis3配置对应）：
@media(min-device-width:320px){html{font-size: 32px;/*no*/}}
@media(min-device-width:360px){html{font-size: 36px;/*no*/}}
@media(min-device-width:375px){html{font-size: 37.5px;/*no*/}}
@media(min-device-width:384px){html{font-size: 38.4px;/*no*/}}
@media(min-device-width:412px){html{font-size: 41.2px;/*no*/}}
@media(min-device-width:414px){html{font-size: 41.4px;/*no*/}}
@media(min-device-width:480px){html{font-size: 48px;/*no*/}}
@media(min-device-width:540px){html{font-size: 54px;/*no*/}}
@media(min-device-width:560px){html{font-size: 56px;/*no*/}}
@media(min-device-width:600px){html{font-size: 60px;/*no*/}}
@media(min-device-width:768px){html{font-size: 76.8px;/*no*/}}
@media(min-device-width:800px){html{font-size: 80px;/*no*/}}
@media(min-device-width:1080px){html{font-size: 108px;/*no*/}}
@media(min-device-width:1280px){html{font-size: 128px;/*no*/}}
@media(min-device-width:1440px){html{font-size: 144px;/*no*/}}
@media(min-device-width:1600px){html{font-size: 160px;/*no*/}}
缺点：不够精确。
3）、javascript设置，通过上面的公式，计算出基准值rem，然后写入样式，大概如下：
var dpr, rem;
var docEl = document.documentElement;
var fontEl = document.createElement('style');
dpr = window.devicePixelRatio || 1;
rem = docEl.clientWidth / 10;
// 设置data-dpr属性，留作的css hack之用
docEl.setAttribute('data-dpr', dpr);
// 动态写入样式
docEl.firstElementChild.appendChild(fontEl);
fontEl.innerHTML = 'html{font-size:' + rem + 'px!important;}';
// 给js调用的，某一dpr下rem和px之间的转换函数
window.rem2px = function(v) {
v = parseFloat(v);
return v * rem;
};
window.px2rem = function(v) {
v = parseFloat(v);
return v / rem;
};
window.dpr = dpr;
window.rem = rem;
这种方式，可以精确地算出不同屏幕所应有的rem基准值，缺点就是要加载这么一段js代码，但个人觉得是这是目前最好的方案了。
这篇关于移动端屏幕适配 fis3+rem方案的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
