移动端rem适配自我实践总结

最新推荐文章于 2023-06-13 16:55:51 发布

hzxOnlineOk

最新推荐文章于 2023-06-13 16:55:51 发布

阅读量139

点赞数

分类专栏：前端开发

本文链接：https://blog.csdn.net/hzxOnlineOk/article/details/103468327

版权

前端开发专栏收录该内容

197 篇文章 4 订阅

订阅专栏

通过js代码以及设备dpr，动态的改变html标签的font-size值，使得rem可以自适应改变大小。

只需要在<head>标签里加上：

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no" />

以及这一段js代码：

<script type="text/javascript">
    // 移动端适配
    (function(doc, win) {
      var docEl = doc.documentElement,
        resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
        recalc = function() {
          var clientWidth = docEl.clientWidth;
          if (!clientWidth) return;
          if (clientWidth > 1024) {
            docEl.style.fontSize = '12px';
          } else {
            docEl.style.fontSize = 100 * (clientWidth / 750) + 'px';
          }
        };
      if (!doc.addEventListener) return;
      win.addEventListener(resizeEvt, recalc, false);
      doc.addEventListener('DOMContentLoaded', recalc, false);
    })(document, window);
<script>

即可实现移动端的rem适配。

但是，如果设计图是375的，那么rem值就需要*2倍（与dpr一致），因为这边是以clientWidth布局视口宽度。

hzxOnlineOk

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
移动端rem适配自我实践总结

通过js代码以及设备dpr，动态的改变html标签的font-size值，使得rem可以自适应改变大小。只需要在<head>标签里加上：<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no...
复制链接

扫一扫