モバイル側rem応答レイアウト開発
2290 ワード
モバイル側rem応答レイアウト開発
remはモバイルWEBアプリ開発でよく使われる長さ単位remは相対長さ単位で、ルート要素(html要素)font-sizeに対して
計算値の倍数ルート要素(html要素)font-sizeのデフォルト値は16 pxです.1rem=16px;
計算を容易にするために、ルート要素のfont-size値を100 pxに設定します.Webページでは、font-sizeの値を動的に変更して、Webページが異なるサイズのデバイスに適応するようにします.
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>