• 移动端之js控制rem,适配字体


    方法一:设置fontsize 按照iphone 5的适配  1em=10px    适配320

    // “()()”表示自执行函数
    (function (doc, win) {
      var docEl = doc.documentElement,
        // 手机旋转事件,大部分手机浏览器都支持 onorientationchange 如果不支持,可以使用原始的 resize
          resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
          recalc = function () {
            //clientWidth: 获取对象可见内容的宽度,不包括滚动条,不包括边框
            var clientWidth = docEl.clientWidth;
            if (!clientWidth) return;
            docEl.style.fontSize = 10*(clientWidth / 320) + 'px';
          };
     
      recalc();
      //判断是否支持监听事件 ,不支持则停止
      if (!doc.addEventListener) return;
      //注册翻转事件
      win.addEventListener(resizeEvt, recalc, false);
     
    })(document, window);

    方法二:按照iPhone6的尺寸设计    是375/25=15px

    (function (docs, win) {
      var docEls = docs.documentElement,
      resizeEvts = 'orientationchange' in window ? 'orientationchange' : 'resize',
      recalcs = function () {
    
      //getBoundingClientRect()这个方法返回一个矩形对象
    
      window.rem = docEls.getBoundingClientRect().width/25;
      docEls.style.fontSize = window.rem + 'px';
    
    };
      recalcs();
      if (!docs.addEventListener) return;
      win.addEventListener(resizeEvts, recalcs, false);
    })(document, window);

    方式三:采用media

    1 html {
     2     font - size: 20 px;
     3 }
     4 @media only screen and(min -  401 px) {
     5     html {
     6         font - size: 25 px!important;
     7     }
     8 }
     9 @media only screen and(min -  428 px) {
    10     html {
    11         font - size: 26.75 px!important;
    12     }
    13 }
    14 @media only screen and(min -  481 px) {
    15     html {
    16         font - size: 30 px!important;
    17     }
    18 }
    19 @media only screen and(min -  569 px) {
    20     html {
    21         font - size: 35 px!important;
    22     }
    23 }
    24 @media only screen and(min -  641 px) {
    25     html {
    26         font - size: 40 px!important;
    27     }
    28 }
    复制代码

    推荐使用的 js方式设置

  • 相关阅读:
    Android中Handler原理
    微软柯塔娜(Cortana)的一句名言
    C# 单例模式的五种写法
    HTTP Status 404
    PLSQL中显示Cursor、隐示Cursor、动态Ref Cursor差别
    Android 开发之集成百度地图的定位与地图展示
    iOS知识点汇总
    优化报表系统结构之报表server计算
    淘宝中间的一像素线(手机端)
    解决yum升级的问题“There was a problem importing one of the Python modules”
  • 原文地址:https://www.cnblogs.com/mancomeon/p/6434372.html
Copyright © 2020-2023  润新知