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上将字体还原大小,避免页面无样式字体超大
    }

     

  • 相关阅读:
    豆瓣api-简单跨域演示
    MVC4 验证用户登录一个特性搞定
    IIS7.5 不能加载外部引用的第三方JS,CSS,img等一系列静态文件
    三合一网站后台密码重置
    anaconda安装 (开源的Python发行版本)
    通达信指标函数说明大全
    织梦CMS如何修改中英文模板的当前位置
    微信小程序上架需要增值电信业务经营许可证ICP?
    PS抠图玻璃杯227
    PS用通道工具人物头发抠图246
  • 原文地址:https://www.cnblogs.com/sunshq/p/10100916.html
Copyright © 2011-2022 走看看