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：
  

• lib-flexible库的使用方法：在

  中添加对应的flexible_css.js,flexible.js文件

• 此处应当使用内联js，在执行js后，会在元素上增加一个data-dpr属性，以及一个 font-size样式，js会根据不同的设备添加不同的data-dpr值，同时会给html加上对应的 font-size的值，因此，需要在所有资源加载之前执行这个js。页面中的所用元素都可以通过rem单位来设置

• 在引入lib-flexible需要执行的js之前，可以手动设置meta来控制 dpr值，如：

其中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.动态改写标签
2.给元素添加data-dpr属性，并且动态改写data-dpr的值
3.元素添加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;
}