读心悦

  • 读心随笔
  • 读心里话
  • 计算机
  1. 首页
  2. html/css
  3. 正文

webapp移动端适配配置【rem】

2020年8月13日 288点热度 0人点赞 0条评论

rem移动端适配:

   <script>
      !(function (win, doc) {
        function setFontSize() {
          var baseFontSize = 100;
          var baseWidth = 320;
          var clientWidth = document.documentElement.clientWidth || window.innerWidth;
          var innerWidth = Math.max(Math.min(clientWidth, 480), 320);
          var rem = 100;
          if (innerWidth > 362 && innerWidth <= 375) {
            rem = Math.floor(innerWidth / baseWidth * baseFontSize * 0.9);
          }
          if (innerWidth > 375) {
            rem = Math.floor(innerWidth / baseWidth * baseFontSize * 0.84);
          }
          window.__baseREM = rem;
          document.querySelector('html').style.fontSize = rem + 'px';
        }
        var evt = 'onorientationchange' in win ? 'orientationchange' : 'resize';
        var timer = null;
        win.addEventListener(evt, function () {
          clearTimeout(timer);
          timer = setTimeout(setFontSize, 300);
        }, false);
        win.addEventListener("pageshow", function (e) {
          if (e.persisted) {
            clearTimeout(timer);
            timer = setTimeout(setFontSize, 300);
          }
        }, false);
        setFontSize();
      }(window, document));
    </script>

 

 

 

赞(1)微海报分享
本作品采用 知识共享署名 4.0 国际许可协议 进行许可
标签: CSS JavaScript
最后更新:2020年9月23日

读心悦

韦永愿的个人博客

打赏 点赞
< 上一篇
下一篇 >

文章评论

您需要 登录 之后才可以评论

读心悦

韦永愿的个人博客

标签聚合
mysql redux JavaScript Nginx node react flutter CSS 小程序 taro git 随笔 canvas 悦读 Echarts hook 闲谈 vue 阅读
分类
  • flutter (11)
  • html/css (23)
  • Javascript (32)
  • Mysql (2)
  • node (2)
  • React (29)
  • vue (1)
  • 小程序 (43)
  • 悦读 (8)
  • 未分类 (2)
  • 读心里话 (12)
最新 热点 随机
最新 热点 随机
JavaScript的深浅拷贝【笔记】 最近的一些心里事儿 JavaScript的Object数据类型转换 JavaScript中 + 隐式类型转换 JavaScript的== 的隐式类型转换 JavaScript数据强制类型转换
微信小程序设置体验版本和线上版本的访问地址JavaScript颜色的工具函数redux简单的笔记JavaScript的数据类型如果有来生JavaScript数据强制类型转换
useContext()组件状态共享或者传值 小程序的进度条 小程序订阅消息 微信小程序前端解密获取用户信息 taro开发小程序中,使用css伪类实现时间轴 react项目打包部署上线完毕后,刷新报错404

COPYRIGHT © 2020 读心悦

黔ICP备20005501号

黔公网安备52011502001078号