flexible

移动端自适应方案 flexible

github: https://github.com/amfe/lib-flexible
使用Flexible实现手淘H5页面的终端适配

dpr（ device pixel ratio ）

设备像素比 = 物理像素 / 设备独立像素
设备独立像素(device independent pixels)与屏幕密度有关

屏幕密度是指一个设备表面上存在的像素数量，它通常以每英寸有多少像素来计算（PPI）。苹果将这个营销出一个专业的术语“Retina”,将其称为双密度显示，声称人类的肉眼将无法区分单个像素。当一个显示屏像素密度超过300ppi时，人眼就无法区分出单独的像素。这也是讲：显示设备清晰度已达到人视网膜可分辨像素的极限。因此行动电话显示器的像素密度达到或高于300ppi就不会再出现颗粒感，而手持平板类电器显示器的像素密度达到或高于260ppi就不会再出现颗粒感，苹果行动电脑的Retina显示器像素密度只要超过200ppi就无法区分出单独的像素。

使用方法

把类视觉稿分成100份来看待（为了以后兼容vh，vw单位）。每一份被称为一个单位a。同时，1rem单位认定为10a。拿750的视觉稿举例：

1a = 7.5px
1rem = 75px

因此，对于视觉稿上的元素的尺寸换算，只需要原始px值除以rem基准px值即可。例如240px * 120px的元素，最后转换为3.2rem * 1.6rem。

sass

px2rem

@function px2rem($pxs, $base-font-size: 64px) {
    $result: '';

    @each $px in $pxs {
        $rem: $px;

        @if $result != '' {
            $result : $result + ' ';
        }

        @if type_of($px) == number {
            $rem : ($px / $base-font-size) * 1rem;
        }

        $result : $result + $rem;
    }

    @return unquote($result);
}

font-size

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