rem动态屏幕适配解决方案

最新推荐文章于 2024-08-01 16:35:03 发布

飞舞风筝

最新推荐文章于 2024-08-01 16:35:03 发布

阅读量1.7k

点赞数

CC 4.0 BY-SA版权

分类专栏：前端文章标签： rem 动态屏幕适配

本文链接：https://blog.youkuaiyun.com/weixin_38704338/article/details/79853145

前端专栏收录该内容

13 篇文章

订阅专栏

本文介绍了一种使用REM单位实现响应式布局的方法，通过动态调整HTML根元素的字体大小来确保页面元素能够在不同屏幕尺寸下正确显示。文中详细解释了如何计算并设置动态的基准字体大小。

(function (doc, win) {
  var docEl = doc.documentElement
  var resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize'
  var recalc = function () {
    var clientWidth = docEl.clientWidth
    if (!clientWidth) return
    docEl.style.fontSize = 100*clientWidth/750 + 'px'
  }
  if (!doc.addEventListener) return
  win.addEventListener(resizeEvt, recalc, false)
  doc.addEventListener('DOMContentLoaded', recalc, false)
})(document, window)

这里的750px就是设计稿的宽度。在此设计稿下换算如下。

如果设计稿中元素为20px，则转换为rem 为0.2rem

元素会根据屏幕的尺寸放大或者缩小

原理：

浏览器默认的1rem =16px, 手机上则根据dpi的不同，这个值有所改变

1rem有多少个px这个是受到最外层元素的font-size影响的。

设置html的fontsize值，设置好后，内部元素的1rem值会被这个值改变。