• 移动端之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方式设置

  • 相关阅读:
    CocoaPods的基本使用方法
    【STM32】电能表抄表功能实现|自学笔记
    【STM32】串口收发驱动Drv_Uart|学习笔记
    【STM32】SYSCLK配置|学习笔记
    【stm32】的PWM外设|学习笔记
    【JavaScript】setAttribute在添加事件时失效解决办法
    三步建立自己域名的主页,Github Pages功能简明手册
    Java生成UUID 与 MySQL数据库如何生成uuid数据
    利用Excel办公软件快速拼接SQL
    Java实现几种常见排序方法
  • 原文地址:https://www.cnblogs.com/mancomeon/p/6434372.html
Copyright © 2020-2023  润新知