zoukankan      html  css  js  c++  java
  • xgqfrms™, xgqfrms® : xgqfrms's offical website of GitHub!

    rem & 16px & 62.5%

    1. 浏览器的默认字体大小都是16px

    2. 兼容性:IE9+,Firefox、Chrome、Safari、Opera 的主流版本都支持了rem

    3. 对不支持的浏览器,应对方法也很简单,就是多写一个绝对单位的声明,这些浏览器会忽略用rem设定的字体大小;

    4. rem 是只相对于根元素htm的 font-size,即只需要设置根元素的font-size,其它元素使用rem单位设置成相应的百分比即可;

    css solution

    @charset "UTF-8";
    
    /* rem & 16px */
    /* 100% === 16px => 1px === 6.25% => 10px === 62.5% */
    /* 1rem === 10px */
    html {
      font-size: 62.5%;
    }
    
    body {
      /* rem fallback */
      font-size: 12px;
      font-size: 1.2rem;
    }
    
    p {
      /* rem fallback */
      font-size: 14px;
      font-size: 1.4rem;
    }
    
    
    
    

    H5 移动端适配

    响应式

    
    /* media query */
    
    @media only screen and (min- 320px){
      html {
        font-size: 62.5% !important;
      }
    }
    @media only screen and (min- 640px){
      html {
        font-size: 125% !important;
      }
    }
    @media only screen and (min- 750px){
      html {
        font-size: 150% !important;
      }
    }
    @media only screen and (min- 1242px){
      html {
        font-size: 187.5% !important;
      }
    }
    
    

    js solution

    js 动态设置根字体

    px-to-rem.js

    //适配不同尺寸
    (function(doc, win) {
        var docEl = doc.documentElement,
            resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
            recalc = function() {
                var clientWidth = docEl.clientWidth;
                if (!clientWidth) return;
                // default 16px = 1rem; => 1px = 1/16rem (0.0625rem);
                docEl.style.fontSize = 100 * (clientWidth / 750) + 'px';
                // 750px PS & customized 100px = 1rem; => 1px = 1/100rem(0.01rem);
            };
        if (!doc.addEventListener) return;
        win.addEventListener(resizeEvt, recalc, false);
        doc.addEventListener('DOMContentLoaded', recalc, false);
    })(document, window);
    
    
    

  • 相关阅读:
    powershell初探(七)
    powershell初探(九)
    打造一个有感觉的Vim(一)
    屏幕录像软件Wink
    注释也精彩
    解决XP专业版局域网访问故障十八招
    可以抓文字的抓图软件
    轻松玩转XP系统(一)
    Excel实战技巧之[活用条件格式]
    局域网传输工具飞鸽传书IPMessager
  • 原文地址:https://www.cnblogs.com/xgqfrms/p/12790805.html
Copyright © 2011-2022 走看看