移动端 解决自适应 和 多种dpr (device pixel ratio) 的 [淘宝] 解决方案 lib-flexible

Posted 2020-08-31 you1you

其实H5适配的方案有很多种，网上有关于这方面的教程也非常的多。

 

不管哪种方法，都有其自己的优势和劣势。

 

为什么推荐使用Flexible库来做H5页面的终端设备适配呢？   原理   简单易懂  源码疑问

主要因为这个库在手淘已经使用了近一年，而且已达到了较为稳定的状态。

除此之外，你不需要考虑如何对元素进行折算，可以根据对应的视觉稿，直接切入。

 

该方案 会 自动根据你的屏幕大小配置好 根节点的 font-size 大小

 

另外会改变 initial-scale , 如果是3倍retina屏, 值变成 1/3,   viewPort被放大为3倍

 

书写的时候可以用 直接写 px, cssrem插件会帮你转成rem, 这样就不会影响开发效率

 

对应@3dpr 的图, 可以用 data-dpr 判断

[data-dpr="3"] & {
    background-image: url("../img/@3x/android.png?v=@@version");
  }

 

对于字体:

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

过程

dpr问题

 https://github.com/amfe/article/issues/17

http://www.cnblogs.com/lyzg/p/5058356.html