前端引入flexible

最新推荐文章于 2025-03-24 17:52:42 发布

qq_40442018

最新推荐文章于 2025-03-24 17:52:42 发布

阅读量1.3k

点赞数

分类专栏：前端适配文章标签： javascript

本文链接：https://blog.youkuaiyun.com/qq_40442018/article/details/105138289

版权

前端适配专栏收录该内容

1 篇文章

订阅专栏

根据查看flexible源码知道，当我们自己设置了meta标签以后，flexible将不会再帮我设置meta标签；将根据已有的meta标签来设置缩放比例;
当我们不设置meta标签时，flexible将根据我们手机的设备像素比devicePixelRatio，设置meta标签（仅对IOS手机）；安卓手机设置
<meta name="viewport" content="initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">

核心代码：
   function refreshRem(){
    var width = docEl.getBoundingClientRect().width;
    if (width / dpr > 540) {
        width = 540 * dpr;
    }
    var rem = width / 10;
    docEl.style.fontSize = rem + 'px';
    flexible.rem = win.rem = rem;
}
函数里面就是实现取到当前设备的width之后根据width计算出rem的具体值，rem代表html的font-size，这里的rem代表的是一个自定义的rem，而不是rem属性！
```[参考](https://blog.csdn.net/weixin_42265852/article/details/87436793)
[参考](https://www.jianshu.com/p/04efb4a1d2f8)