css学习笔记-px,rem,em的区别

概述

属性

em

元素相对于父级的font-size值的大小

例如父级的font-size=100px

则元素的1em=100px 0.1em=10px

rem

页面内元素相对于html标签的font-size值

例如html标签的font-size=100px

则元素的1em=100px 0.1em=10px

设置全局font-size变量(移动端使用可以非常方便)

创建js文件，并加入以下代码，可以让页面的fontsize根据设计稿的宽度cilentwidth的变化二等比例变化

页面需要将js引入

(function(doc, win) {
    var docEl = doc.documentElement,
        resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
        recalc = function() {
            var clientWidth = docEl.clientWidth;//clientWidth是设计稿宽度
            if (!clientWidth) return;
            docEl.style.fontSize = 100 * (clientWidth / 750) + 'px';
        };
    if (!doc.addEventListener) return;
    win.addEventListener(resizeEvt, recalc, false);
    doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);

举例

<div class="container"></div>

    .container{
        width: 3rem;
        height: 3rem;
        background-color: red;
    }

引入js文件之前

html标签的font-size默认为0

引入js文件之后

html标签的font-size改变