モバイル側rem応答レイアウト開発

2290 ワード

モバイル側rem応答レイアウト開発
remはモバイルWEBアプリ開発でよく使われる長さ単位remは相対長さ単位で、ルート要素(html要素)font-sizeに対して
計算値の倍数ルート要素(html要素)font-sizeのデフォルト値は16 pxです.1rem=16px;
計算を容易にするために、ルート要素のfont-size値を100 pxに設定します.Webページでは、font-sizeの値を動的に変更して、Webページが異なるサイズのデバイスに適応するようにします.
<script type="text/javascript">
        function refreshRem() {
        var desW = 750,
        winW = document.documentElement.clientWidth,
        ratio = winW / desW;
        document.documentElement.style.fontSize = ratio * 50 + 'px';
        }
        refreshRem();
        window.addEventListener('resize', refreshRem);
    </script>