zoukankan      html  css  js  c++  java
  • H5移动端字体自适应(也适用于宽高)

    原文地址:

    https://mp.weixin.qq.com/s/hhmav2sbAgb7w17ipVZiTw

    方法一:纯css方法, 精确度高,IOS 和 安卓 字体大小同等比例
    1.1 以16px为基准,在根元素html下,字体为62.5%
    1.2 此时1rem=10px;

    /* css代码 */
    html {
      /* 10÷16=62.5% */
      font-size: 62.5%;
    }
    
    body {
      font-size: 12px;
      /* 12÷10=1.2 */
      font-size: 1.2rem;
    }

    方法二:纯css方法, 精确度高,IOS 和 安卓 字体大小同等比例
    2. 在css里,设置 html 元素的字体 font-size 设置为,50px;
    2.1 字体和元素宽度用rem,字体和元素的实际大小等于:rem乘以100除以2

    /* css代码 */
    /* 在根元素html下,font-size 设置为,50px; */
    html{
      // 此处为重点
      font-size: 50px;
    }
    body{
      font-size: 12px;
    }
    
    /* 示例 设置一个宽为400px 高为150px 字体大小为 24px 的div盒子 */
    .div {
      font-size: 0.48rem;
      8rem ;
      height: 3rem;
      background-color:red ;
    }
    /* 以上结果为:
    *  400px;
    * height:150px;
    * font-size:24px;
    * /

    方法三:使用JS,通过识别设备是IOS 还是 安卓,用JS动态计算rem转换px
    3. 此方法rem转px精确不是高
    3.1 以iphone6为例,rem转px 零误差;以三星S5为例,rem转px误差0002
    3.2 ios 上1rem=10px;安卓上,1rem=1.5px到1.4168px之间;因此使用了 ismobile 方法判断设备平台,使rem转转px,尽量在IOS 和 安卓上 单位长度保持统一==
    3.3 1rem=10px

    // JS JS动态计算rem转换p
    function fontSize() {
            var mobileType = ismobile(0)
            //通过navigator判断是否是移动设备
            if ((navigator.userAgent.match(
                /(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i
              ))) {
              //在移动端
              (function(doc, win) {
                //  html
                var docEl = doc.documentElement,
                  resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
                  recalc = function() {
                    var clientWidth = docEl.clientWidth;
                    if (!clientWidth) return;
                    // console.log("ty",mobileType);
                    if (mobileType == "Android") {
                      console.log("我是安卓----------");
                      clientWidth = (clientWidth > 768) ? 768 : clientWidth;
                      docEl.style.fontSize = 10.4168 * (clientWidth / 375) + 'px'; //这个10可以根据自己使用的数据来调整
                    }
                    if (mobileType == "iPhone") {
                      console.log("我是苹果----------");
                      clientWidth = (clientWidth > 768) ? 768 : clientWidth;
                      docEl.style.fontSize = 10 * (clientWidth / 375) + 'px'; //这个10可以根据自己使用的数据来调整
                    }
                  };
                if (!doc.addEventListener) return;
                win.addEventListener(resizeEvt, recalc, false);
                recalc();
              })(document, window);
              //移动端  文字适配
            } else { //如果是pc端我们可以像微信公众号那样,设置最大宽度为740px
              document.documentElement.style.margin = "0 auto"
              //PC端
            }
          }
          
    // -识别IOS还是安卓
          // param test: 0:iPhone    1:Android
          function ismobile(test) {
            var u = navigator.userAgent,
              app = navigator.appVersion
            if (/AppleWebKit.*Mobile/i.test(navigator.userAgent) || (
                /MIDP|SymbianOS|NOKIA|SAMSUNG|LG|NEC|TCL|Alcatel|BIRD|DBTEL|Dopod|PHILIPS|HAIER|LENOVO|MOT-|Nokia|SonyEricsson|SIE-|Amoi|ZTE/
                .test(navigator.userAgent))) {
              if (window.location.href.indexOf("?mobile") < 0) {
                try {
                  if (/iPhone|mac|iPod|iPad/i.test(navigator.userAgent)) {
                    return "iPhone";
                  } else {
                    return "Android";
                  }
                } catch (e) {
                  //            alert(e);
                }
              }
            } else if (app.indexOf('iPad') > -1 || app.indexOf('iPhone') > -1) {
              return "iPhone";
            } else {
              return "Android";
    
            }
          };
  • 相关阅读:
    入门菜鸟
    FZU 1202
    XMU 1246
    Codeforces 294E Shaass the Great 树形dp
    Codeforces 773D Perishable Roads 最短路 (看题解)
    Codeforces 814E An unavoidable detour for home dp
    Codeforces 567E President and Roads 最短路 + tarjan求桥
    Codeforces 567F Mausoleum dp
    Codeforces 908G New Year and Original Order 数位dp
    Codeforces 813D Two Melodies dp
  • 原文地址:https://www.cnblogs.com/ts119/p/13468156.html
Copyright © 2011-2022 走看看