flexible随笔
1.什么是flexible？
flexible是responsive的低端形态和基础。直观来说，在任何宽度的屏幕上，网页显示不会两边留白，相当于PC端的流体布局，两者的区别在于，流体布局的表现角度在于实现，flexible的表现角度注重结果。
网页的设计常用的后两种方式：
- response design：响应式设计
- adaptive design：适应型设计
关于像素的几个概念
- PPI（单位英寸像素）：在一英寸内的像素数，此像素的大小决定了屏幕的显示质量
- Dpr（设备的像素比率）：设备像素与css像素之间的比例，即一个设备像素中显示多少个css像素
物理像素：显示屏的最佳分辨率，即屏幕实际存在的像素行数乘以列数的数学表达式，是显示屏固有的参数，不能调节，其含义是指显示屏最高可显示的像素数。单位：px
逻辑像素：在不同大小的屏幕中 逻辑像素不同，可以根据需要来设定多少倍的px，如：1pt=4px
Retina屏：Retina是一种显示技术，可以将更多的像素点压缩至一块屏幕里，从而达到更高的分辨率并提高屏幕显示的细腻程度。最初该技术用于Moto Aura上，通常这种分辨率在正常观看距离下无法使肉眼分辨其中的显像单元，也 称为视网膜显示屏。
2.lib-flexbile
-
lib-flexible是用来适配屏幕的开源库，可以直接使用阿里CDN：
<script src="http://g.tbcdn.cn/mtb/lib-flexible/0.3.4/??flexible_css.js,flexible.js"></script> -
lib-flexible库的使用方法：在<header></header>中添加对应的flexible_css.js,flexible.js文件 -
此处应当使用内联js，在执行js后，会在
<html>元素上增加一个data-dpr属性，以及一个font-size样式，js会根据不同的设备添加不同的data-dpr值，同时会给html加上对应的font-size的值，因此，需要在所有资源加载之前执行这个js。页面中的所用元素都可以通过rem单位来设置 -
在引入
lib-flexible需要执行的js之前，可以手动设置meta来控制dpr值，如：
<meta name="flexible" content="initial-dpr=2" />
其中initial-dpr会把dpr强制设置为给定的值。如果手动设置了dpr后，不管设备是多少dpr，都会强制使用手动设置的值。
if (!dpr && !scale) {
var isAndroid = win.navigator.appVersion.match(/android/gi);
var isIPhone = win.navigator.appVersion.match(/iphone/gi);
var devicePixelRatio = win.devicePixelRatio;
if (isIPhone) { // iOS下，对于2和3的屏，用2倍的方案，其余的用1倍方案
if (devicePixelRatio >= 3 && (!dpr || dpr >= 3)) {
dpr = 3;
} else if (devicePixelRatio >= 2 && (!dpr || dpr >= 2)){
dpr = 2;
} else {
dpr = 1;
}
} else { // 其他设备下，仍旧使用1倍的方案
dpr = 1;
}
scale = 1 / dpr;
}
js做了这么几件事：
1.动态改写
<meta>标签
2.给<meta>元素添加data-dpr属性，并且动态改写data-dpr的值
3.<html>元素添加font-size属性，并且动态改写font-size的值
- 字号一般不用rem
现在绝大多数的字体文本都是自带一些点阵尺寸，通常是16px和24px，所以我们不希望出现一些小数尺寸
在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;
}
