原文参考链接:
https://github.com/amfe/article/issues/17
移动端适配的flexible解决方案:
https://github.com/amfe/lib-flexible
基本概念:
1、物理像素
物理像素就是设备上的像素点。
2、设备独立像素
这是一个虚拟像素,可以认为是计算机坐标系统中的一点。会根据相关的系统转换为物理像素。
3、设备像素比(dpr)
设备像素比 = 物理像素 / 设备独立像素
在JS中,可以通过window.devicePixelRatio获取到当前设备的dpi;在CSS中,可以通过-webkit-device-pixel-ratio,-webkit-min-device-pixel-ratio,-webkit-max-device-pixel-ratio进行媒体查询。
举个例子:
众所周知,iPhone6的设备宽度和高度为375pt * 667pt,可以理解为设备的独立像素;而其dpr为2,根据上面公式,我们可以很轻松得知其物理像素为750pt * 1334pt。
4、CSS中的rem
rem就是相对于根元素html的font-size来做计算。而我们的方案中使用rem单位,是能轻易的根据 html 的font-size计算出元素的盒模型大小。而这个特色对我们来说是特别的有益处。
解决方案flexible的实质:
动态改写meta标签
给html元素添加data-dpr属性,并且动态改写data-dpr的值
给html元素添加font-size属性,并且动态改写font-size的值
另外,文本字号不建议使用rem
显然,我们在iPhone3G和iPhone4的Retina屏下面,希望看到的文本字号是相同的。也就是说,我们不希望文本在Retina屏幕下变小,另外,我们希望在大屏手机上看到更多文本,以及,现在绝大多数的字体文件都自带一些点阵尺寸,通常是16px和24px,所以我们不希望出现13px和15px这样的奇葩尺寸。
如此一来,就决定了在制作H5的页面中,rem并不适合用到段落文本上。所以在Flexible整个适配方案中,考虑文本还是使用px作为单位。只不过使用[data-dpr]属性来区分不同dpr下的文本字号大小。
div {
width: 1rem;
height: 0.4rem;
font-size: 12px; // 默认写上dpr为1的fontSize
}
[data-dpr="2"] div {
font-size: 24px;
}
[data-dpr="3"] div {
font-size: 36px;
}