移动端如何用rem实现适配

最新推荐文章于 2025-03-21 22:22:21 发布

小杨不懂

最新推荐文章于 2025-03-21 22:22:21 发布

阅读量913

点赞数

文章标签： css 前端 html javascript

本文链接：https://blog.csdn.net/Coding_Peasant_Y/article/details/120900664

版权

本文探讨了在CSS中px、em、rem单位的区别，强调了rem在移动端适配中的优势。介绍了如何封装375px规格页面的rem适配函数，并详细解释了在meta标签中设置viewport属性以实现响应式布局的方法。

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

在css中单位长度用的最多的是px、em、rem，这三个的区别是：

px是固定的像素，一旦设置了就无法因为适应页面大小而改变

em和rem相对于px更具有灵活性，他们是相对长度单位，意思是长度不是定死了的，更适用于响应式布局。

绝对单位 px
相对单位 em rem 默认相对单位 1em=16px 1rem=16px
em 相对于父级
rem 相对于根元素 html

封装的函数

封装的375px规格页面 rem适配的函数放到js中直接引入就可以使用rem

1rem=100px

例：375px大小换成rem就是3.75rem以此类推比如16px就是0.16rem

(function(win) {
        var docEl = win.document.documentElement;
        var time;

        function refreshRem() {
                var width = docEl.getBoundingClientRect().w

最低0.47元/天解锁文章