zoukankan      html  css  js  c++  java
  • 关于rem适配的3种常用封装

    在之前写了一篇关于rem适配的文章,但是没有给出具体的封装,那么今天这里给出常用的三种方法,分享出来供大家参考学习,下面话不多说了,来随着小编一起学习学习吧

    一、rem1.js

    第一种方法考虑了m端屏幕旋转的问题.对兼容性做出了一定的处理,具体看代码.

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    export function rem (doc, win) {
      let docEl = doc.documentElement;
      //考虑以及兼容了 屏幕旋转的事件
      let resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize';
      let recalc = function () {
                var clientWidth = docEl.clientWidth;
                if (!clientWidth) return;
                if (clientWidth >= 750) {
                     docEl.style.fontSize = '100px';
                } else {
                     docEl.style.fontSize = 100 * (clientWidth / 750) + 'px';
                }
          };
     
       if (!doc.addEventListener) return;
        win.addEventListener(resizeEvt, recalc, false);                         // 屏幕大小以及旋转变化自适应
        doc.addEventListener('DOMContentLoaded', recalc, false);     // 页面初次打开自适应
        recalc();
    };

    二、rem2.js

    采用html标签的offsetWidth长度计算,

    1
    2
    3
    4
    5
    6
    7
    8
    export function rem() {
      var fz = document.querySelector('html').offsetWidth / 7.5; //设计图 750 1rem=100px
      document.querySelector('html').style.fontSize =
        fz <= 100 ? fz + 'px' : '100px';
      window.onresize = function() {
        rem();
      };
    };

    三、rem3.js

    采用window.innerWidth计算,设置了body fontSize防止字体继承,使页面字体过大.

    1
    2
    3
    4
    export function rem() {
      document.documentElement.style.fontSize = window.innerWidth / 7.5 + 'px'; //1rem = 100px
      document.body.style.fontSize = '14px';// 在body上将字体还原大小,避免页面无样式字体超大
    }

     

  • 相关阅读:
    五大存储模型关系模型、键值存储、文档存储、列式存储、图形数据库
    UML语言中类之间关系
    hadoop的yarn资源队列
    Scala中下划线的7种用法
    《机器学习》(周志华)西瓜书读书笔记(完结)
    Pytorch DistributedDataParallel简明使用指南
    本地查看SSH远程连接服务器上的TensorBoard
    python max()用法
    实现go并发的三种方式
    docker分阶段构造nginx镜像
  • 原文地址:https://www.cnblogs.com/sunshq/p/10100916.html
Copyright © 2011-2022 走看看