首页 > 其他分享 >移动端rem响应式布局开发

移动端rem响应式布局开发

时间:2023-01-26 11:31:30浏览次数:33  
标签:移动 ratio 元素 响应 rem font refreshRem size


移动端rem响应式布局开发

rem 是在移动WEB APP开发中常用的长度单位 rem 为相对长度单位,相对于根元素(html 元素)font-size

计算值的倍数 根元素(html 元素)font-size的默认值为16px; 1rem=16px;

为了便于计算,我们一般会设置根元素的 font-size值为100px
在网页中我们会使用以下代码,动态修改font-size的值,以达到网页适应不同尺寸的设备。

<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>


标签:移动,ratio,元素,响应,rem,font,refreshRem,size
From: https://blog.51cto.com/u_14365218/6023272

相关文章