flexible填坑

flexible是什么

淘宝手淘团队的移动适配方案

如何使用

引入

1. 相对路径

   1. <script src="build/flexible_css.debug.js"></script>
      <script src="build/flexible.debug.js"></script>

2. cdn路径：

写入meta

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;
}

上面的是灵活写法，也可以固定为普通屏

使用CSSREM配置px转换rem值

1. 在vscode中安装完成之后修改默认配置
    "cssrem.rootFontSize": 75 //设置默认字体大小
    "cssrem.autoRemovePrefixZero":false    //去除前缀为0
    
2. 在sublime中使用
      下载本项目，比如：git clone https://github.com/flashlizi/cssrem
      进入packages目录：Sublime Text -> Preferences -> Browse Packages...
      复制下载的cssrem目录到刚才的packges目录里。
      重启Sublime Text。
      配置参数
      参数配置文件：Sublime Text -> Preferences -> Package Settings -> cssrem

      px_to_rem - px转rem的单位比例，默认为40。
      max_rem_fraction_length - px转rem的小数部分的最大长度。默认为6。
      available_file_types - 启用此插件的文件类型。默认为：[".css", ".less", ".sass"]。

最后是字体的书写

上面的都是样式布局的使用，但是我们要考虑的字体的显示

来自官方的语言：我们在iPhone3G和iPhone4的Retina屏下面，希望看到的文本字号是相同的。也就是说，我们**不希望文本在Retina屏幕下变小**，另外，我们**希望在大屏手机上看到更多文本**，以及，现在绝大多数的字体文件都自带一些点阵尺寸，通常是`16px`和`24px`，所以我们**不希望出现13px和15px这样的奇葩尺寸**。

如此一来，就决定了在制作H5的页面中，`rem`并不适合用到段落文本上。所以在Flexible整个适配方案中，考虑文本还是使用`px`作为单位。只不过使用`[data-dpr]`属性来区分不同`dpr`下的文本字号大小。

#### 所以我们应该这样做

定义一个scss函数   使用@mixin定义函数  使用@include来引用函数
@mixin font-dpr($font-size){
    font-size: $font-size;

    [data-dpr="2"] & {
        font-size: $font-size * 2;
    }

    [data-dpr="3"] & {
        font-size: $font-size * 3;
    }
}
h3{
  @include font-dpr(16px);
}

知识贵在实践~加油！