原理:
物理像素:
一个物理像素是显示器（手机屏幕）上的最小物理显示单元。
设备独立像素:
设备独立像素（密度无关像素），可以认为是计算机坐标系统中得一个点，这个点代表一个可以由程序使用的虚拟像素(比如: css像素)，然后由相关系统转换为物理像素。
设备像素比:
设备像素比(简称dpr)定义了物理像素和设备独立像素的对应关系，它的值可以按如下的公式的得到:
设备像素比 = 物理像素 / 设备独立像素 // 在某一方向上，x方向或者y方向
在javascript中，可以通过window.devicePixelRatio获取到当前设备的dpr。
以iphone6为例子：
1、设备宽高为375×667，可以理解为设备独立像素(或css像素)。
2、dpr为2，根据上面的计算公式，其物理像素就应该×2，为750×1334。
image.png
我们称dpr大于1的屏幕为高清屏(retina)。
对于:
width: 2px;
height: 2px;
在不同的屏幕上(普通屏幕 vs retina屏幕)，css像素所呈现的大小(物理尺寸)是一致的，不同的是1个css像素所对应的物理像素个数是不一致的。
在普通屏幕下，1个css像素 对应 1个物理像素(1:1)。 在retina 屏幕下，1个css像素对应 4个物理像素(1:4)。
引入原因:
retina下，border: 1px问题
那么retina显示屏的优势在哪里，设计师为何觉得高清屏下(右图)这个线条粗呢？明明和左右一样的~
image.png
上图中，对于一条1px宽的直线，它们在屏幕上的物理尺寸(灰色区域)的确是相同的，不同的其实是屏幕上最小的物理显示单元，即物理像素，所以对于一条直线，iphone5它能显示的最小宽度其实是图中的红线圈出来的灰色区域，用css来表示，理论上说是0.5px。
所以，设计师想要的retina下border: 1px;，其实就是1物理像素宽，对于css而言，可以认为是border: 0.5px;，这是retina下(dpr=2)下能显示的最小单位。 然而，无奈并不是所有手机浏览器都能识别border: 0.5px;，ios7以下，android等其他系统里，0.5px会被当成为0px处理，那么如何实现这0.5px呢？
然而，无奈并不是所有手机浏览器都能识别border: 0.5px;，ios7以下，android等其他系统里，0.5px会被当成为0px处理，那么如何实现这0.5px呢？
1、简单的做法
.scale{
position: relative;
}
.scale:after{
content:"";
position: absolute;
bottom:0px;
left:0px;
right:0px;
border-bottom:1px solid #ddd;
webkit-transform:scaleY(.5);
webkit-transform-origin:0 0;
}
我们照常写border-bottom: 1px solid #ddd;，然后通过transform: scaleY(.5)缩小0.5倍来达到0.5px的效果，但是这样hack实在是不够通用(如：圆角等)，写起来也麻烦。
2、推荐的做法
<meta name="viewport" content="width=640,initial-scale=0.5,maximum-scale=0.5, minimum-scale=0.5,user-scalable=no">
这样，页面中的所有的border: 1px都将缩小0.5，从而达到border: 0.5px;的效果。
缩放的公式:
var dpr = window.devicePixelRatio;
var ratio = 1 / dpr;
var content = 'width=device-width, initial-scale=' + ratio + ', user-scalable=no, minimum-scale=' + ratio + ',
maximum-scale=' + ratio;
viewport.setAttribute('content', content);
这样页面就根据dpr的值来进行对应的缩放。
然而，页面scale，必然会带来一些问题:
1、字体大小会被缩放
2、页面布局会被缩放(如: div的宽高等)
多屏适配布局问题:
移动端布局，为了适配各种大屏手机，目前最好用的方案莫过于使用相对单位rem。
基于rem的原理，我们要做的就是: 针对不同手机屏幕尺寸和dpr动态的改变根节点html的font-size大小(基准值)。
对于M站:
因为UI从来是拿iphone6的标注来给前端，所以我们直接用iphone6的标准。
根据rem,iphone6下的font-size应该是 32px 得出一个比率称为bRate = 750 / 32； bRate: 23.4275; 所以一切其他的手机屏幕都可以围绕这个bRate设置font-siez基准值。
fontSize = document.documentElement.getBoundingClientRect().width / bRate
htmls.setAttribute('style', 'font-size: ' + fontSize + 'px');
这样实现了根据不同的屏幕宽度和dpr来实现不同响应式布局，很好的解决了border: 1px问题，也真正用到了rem。
好处：
1、 border: 1px问题。
2、 解决了以前根据屏幕宽度来手动做适应的是问题，比如iphone4上展示两个标签，iphone6上展示4个标签这种问题。
如果将rem转为为px :
ipone6下 将 xxxrem 转换为 px的方法 xxx * 32 即可
要求:
由于引入了rem，会对开发人员有一点点要求：
1、不能在html.tpl中的 styl里面写 px，所有的style都写在样式表里面。
不允许:
<p style=”height: 40px;width: 40px;”> </p>
<img src=”xxx” width=”120”, height=”130”>
推荐:
<p class=”setHeight”></p>
<img src=”xxx” class=”myImg”>
2、不能在js中的写px，所有的位置计算，都以一个dom为基准计算，不允许平白无故写px。
不允许:
$(‘.mydom’)
.css(
{ height: ‘40px’ }
);
if ($(‘.myDom’).height > 100)
推荐:
$(‘.mydom’).addClass(‘setHeight’);
if ($(‘.myDom’).height > $(‘.otherDom’).height)
3、不推荐在html里面拼大量的字符串，如果需要前端渲染模板，不推荐写在Js里面，而是用artTemplate进行渲染。
如果只有一两行的html话
不允许:
var s = ‘<p style=”height: 30px”></p>’;
推荐:
var s =’<p class=”myStyle”></p>’
不兼容问题:
1、富文本：
富文本中可以自己定义px，会造成部分被缩放的问题，所以建议凡是引用富文本的地方建议进行过滤处理。
过滤函数 M1,M2 common/function/transToRem.js
2、播放器：
由于每个手机原生的H5 video标签的播放器都不一样，所以不推荐有播放器的页面进行自适应缩放。
（会有播放进度条和播放按钮过被压缩过小的问题，如果PM接受可以用缩放)。
3、嵌入外部网页的iframe
如果要嵌入主站的iframe或者别的网站的iframe的话(子页面没设置fontSize的话)，也不推荐使用缩放。
这种页面M站有 引用百家云SDK播放器、百度地图。
开关:
模板：针对上述情况，在M1、M2中设置了开关，只需要在入口模板中的
image.png
加{{$isNeedScale = false}}
js: TODO: 暂时还没提取，会提取一个公共js来判断js是否被缩放开关。
M2的react TODO: 暂时还没提取，会提取一个公共js来判断js缩放开关。
网友评论