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);
    
    
    

  • 相关阅读:
    每日一练ACM 2019.0417
    每日一练ACM 2019.0416
    每日一练ACM 2019.04.13
    每日一练ACM 2019.04.14
    创建线程的方法
    类和对象的概念
    接口的概念
    Mysql添加取消自增属性
    SpringMVC不支持PUT表单提交
    SSM框架整合报org.springframework.beans.factory.NoSuchBeanDefinitionException
  • 原文地址:https://www.cnblogs.com/xgqfrms/p/12790805.html
Copyright © 2011-2022 走看看