CSS—rem+sass適合移動端

目次
一、設備画素比
二、単位変換
三、フォントサイズが合う

一、設備画素比

目に見える画面は物理画素で構成され、CSSは論理画素を使用し、仮想画素とも呼ばれる.デバイスの画素比DPR(精度とも呼ばれる)は、物理画素と論理画素の関係を表す.計算式は次のようになります.

DPR =     /    

画素比の存在は、CSSで同じ画素が設定されているのにデバイスによって表示が異なる理由です.

二、単位変換

Sassではpxとrem間の相互変換を実現することができ,この過程はSassの@function法によって実現される.ルートラベルのフォントサイズは、次のコードに示すように、視幅の10分の1、すなわち1 remが視幅の10分の1に等しいように設定します. 

    let htmlWidth = document.documentElement.clientWidth || document.body.clientWidth;
    let htmlDom = document.getElementsByTagName('html')[0];
    htmlDom.style.fontSize = htmlWidth / 10 + 'px';

なお、以下の単位変換はいずれも視幅320 pxの機種でテストされ、
px回転rem

//    ：      
$html-font-size: 32px !default;

@function pxTorem($px){
    @return $px / $html-font-size * 1rem;
}

.demo{
    width: pxTorem(64px);
    height:pxTorem(64px);
    background-color: red;
}

//    ：      
@function pxTorem($px){
    $html-font-size: 32px;
    @return ($px/$html-font-size) + rem;
}

三、フォントサイズが合う

要素の幅、余白などのプロパティはremを推奨しますが、フォントサイズはpxを推奨します.750画素の設計原稿を想定すると、フォントサイズは12 px、拡大縮小0.5後、フォントサイズは6 pxと明らかに不合理であるため、画面のDPRに合わせて適合する必要がある.

.a{
    font-size:12px;
}
[data-dpr="2"] .a{
    font-size: 24px;
}
[data-dpr="3"] .a{
    font-size: 36px;
}

詳細は、http://www.softwhy.com/article-10146-1.html.