フレックスレイアウトemを使用してrem適応移動端ページ

フレックスレイアウトemとremを使用してエンドページを適応
Emとremを比較するとemの悪いところはemが親を基準に単位換算され、多くのブラウザのhtmlのfont-sizeのデフォルト値は16 pxなので、bodyベースのすべてのサブセットは16 pxを基準にemの換算が行われます.面倒なことに、子要素の親が1つ以上の場合、em単位は前の親のfont-size属性を継承します.サブセットの単位換算は複雑になります.
remはルート要素に作用するhtmlなので、ページ内のすべての要素はhtmlのfont-sizeに照らして換算され、親の影響を受けません.
プロジェクトプロセス図では、設計原稿を100%復元するため、設計原稿の寸法は、一般に750、viewportにより表示領域を750とする.

<meta name="viewport" content="width=750,target-densitydpi=device-dpi,maximum-scale=1.0, user-scalable=no">

ここでは、基準値を100 pxとし、750/100=7.5(750 px=7.5 rem)に設定します.

html,body{
     
    width: 100%;
    height: 100%;
    font-size: 100px;
}

jsを使用して画面幅を動的に取得し、基準値を再計算します.

	let html = document.getElementsByTagName('html')[0];

    resize()

    window.addEventListener('resize',function () {
     //  
        resize()
    })

    function resize(){
     
        let width = document.body.offsetWidth
        console.log(width)
        width > 750 ? 750 : width;
        width < 320 ? 320 : width;
        html.style.fontSize = width/7.5 + 'px'
    }