移动端开发（二）：rem单位的计算问题

最新推荐文章于 2025-05-26 12:30:00 发布

top_liqian

最新推荐文章于 2025-05-26 12:30:00 发布

阅读量905

点赞数 1

CC 4.0 BY-SA版权

文章标签：移动端开发 rem计算

本文链接：https://blog.youkuaiyun.com/top_liqian/article/details/78337095

本文介绍了一种基于rem单位的移动端页面适配方案，通过JavaScript动态调整根元素字体大小实现不同设备屏幕尺寸的适配。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

rem单位的计算问题

移动端开发要对各种手机屏幕尺寸做到适配，此时最合适的就要数rem单位，以iphone6手机屏幕为标准，适配其他手机屏幕的js代码如下：

<script
type="text/javascript">
        (function(){
            
            var 
html = document.documentElement;
var windowWidth =
window.screen.width;
var dpr =
window.devicePixelRatio;
if (window.devicePixelRatio >=
1.5) {
dpr = 2;
}
//设置data-dpi属性，留作的css hack之用
            html.setAttribute('data-dpr',
dpr);
html.style.fontSize =
html.clientWidth /
7.5 + 'px';


        })();
    </script>