单位em rem % vw vh vmin和vmax的

 

em：定义字体大小时以父级的字体大小为基准；定义长度单位时以当前字体大小为基准。

         例父级font-size： 14px; 则子级font-size：1em为font-size：14px; 若定义长度时，子级的字体大小如果为14px，则子级width: 2em 为width: 24px 

rem：以根元素的字体大小为基准。例如html的font-size：14px,  则子级1rem = 14px

 

%： 以父级的单位为基准。 计入父级 width：200px, height:200px; 则子级width: 50%; height:50%; 为width: 100px; height: 100px;

 

vw 和 vh： 基于视口的宽度和高度， 例如视口宽度为1000px， 则60vw = 600px

vmin和vmax： vmin为当前vw和vh中较小的一个值； vmax为较大的一个值，例如视口宽度375px, 视口高度812px,  则100vmin = 375px; 100vmax = 812px;

 

 

移动端布局总结：

1.  移动端布局的方式使用rem和flex。flex布局比较灵活，但是字体大小不好控制，我们使用rem 和 媒体查询控制字体的大小，媒体查询视口的代销，然后不同的视口上设置html的font-size

2. 可单独制作移动端页面也可以响应式pc移动端共用一个页面。

 

移动端布局中怎样初始化根元素的字体大小：

1. js 初始化字体大小

页面开头引入这段代码，用于动态计算font-size

(假设你需要的1rem  = 20px)

 

(function(){
  var html = document.documentElement;
  function onWindowResize () {
      html.style.fontSize = html.getBoundingClientRect().width / 20 + 'px';      
     } 
   window.addEventListener('resize', onWindowResize);
   
   onWindowResize();
})()

 

 

· document.documentElement: 获取document的根元素

· html.getBoundingClientRect().width:  获取html的宽度(窗口的宽度)

· 监听window的resize事件

 

2.  媒体查询

//不过有一点比较麻烦就是得知道设备的宽度，这种方法不太智能，不过性能方面肯定最高。

@media screen and (min-width: 320px) {
    html {
        font-size: 50px;
    }
}

@media screen and (min-width: 360px) {
    html {
        font-size: 56px;
    }
}

 

 

能源项目

最近写pc项目简单使用了rem, 以3840px为设计稿， 刚开始为了方便换算，将html的font-size设计成了10px, 则子元素 3.6rem即代表36px的字体大小

css：

根元素

html { font-size: 10px; }

子元素

.item h4{
    width: 100%;
    height: 5rem;
    line-height: 5rem;
    background: url("../images/ol_bg.png") no-repeat;
    background-size: 100% 100%;
    padding-left: 9rem;
    font-size: 3.6rem;   // font-size 3.6rem 代表子元素字体大小为36px
    
  
}

 

后又兼容了1440px的分辨率, 我使用的是媒体查询功能，此时只改变根元素字体大小即可，计算方式 1440/3840 * 10  = 3.75 , 所以

css： 

@media screen and (max-width: 1680px) {
    html { font-size: 3.75px;  }
}

 

如果使用js去动态设计字体大小，则换算公式应该是 ，动态计算的好像有点绕，需要多理解

(function(){
  var html = document.documentElement;
  function onWindowResize () {
    html.style.fontSize = html.getBoundingClientRect().width / 384 + 'px';   // 此处除以384是因为以3840px设计稿为基准，前面为了方便计算使得1rem = 10px ， 所以 3840 / 384 = 10px 即是前面html的基础值
  }
  window.addEventListener('resize', onWindowResize);

  onWindowResize();
})()

 

 

以下是淘宝使用的js

    //我一直在用这个 绝对好用 还可以meta都不用写 js会判断如果没有则创建一个。
    (function (win) {
        var ratio, scaleValue, renderTime,
                document = window.document,
                docElem = document.documentElement,
                vpm = document.querySelector('meta[name="viewport"]');

        if (vpm) {
            var tempArray = vpm.getAttribute("content").match(/initial\-scale=(["']?)([\d\.]+)\1?/);
            if (tempArray) {
                scaleValue = parseFloat(tempArray[2]);
                ratio = parseInt(1 / scaleValue);
            }
        } else {
            vpm = document.createElement("meta");
            vpm.setAttribute("name", "viewport");
            vpm.setAttribute("content", "width=device-width, initial-scale=1, user-scalable=no, minimal-ui");
            docElem.firstElementChild.appendChild(vpm);
        }

        win.addEventListener("resize", function () {
            clearTimeout(renderTime);
            renderTime = setTimeout(initPage, 300);
        }, false);

        win.addEventListener("pageshow", function (e) {
            e.persisted && (clearTimeout(renderTime), renderTime = setTimeout(initPage, 300));
        }, false);

        "complete" === document.readyState ? document.body.style.fontSize = 12 * ratio + "px" : document.addEventListener("DOMContentLoaded", function () {
            document.body.style.fontSize = 12 * ratio + "px";
        }, false);

        initPage();

        function initPage() {
            var htmlWidth = docElem.getBoundingClientRect().width;
            htmlWidth / ratio > 540 && (htmlWidth = 540 * ratio);
            win.rem = htmlWidth / 16;
            docElem.style.fontSize = win.rem + "px";
        }
    })(window);

    //以上两种方法都行，还适用于雪碧图。同上的计算方法即可。当然也不是非得分成16份。可以是人一份，只不过计算时替换16就可以了。还有就是计算比较麻烦，不过你如果习惯sacss less css编译写法就很简单了 定义变量，引用直接/变量即可。