CSS中的单位

在css中单位长度用的最多的是px、em、rem，这三个的区别是：

　　px是固定的像素，一旦设置了就无法因为适应页面大小而改变。

　　em和rem相对于px更具有灵活性，他们是相对长度单位，意思是长度不是定死了的，更适用于响应式布局。

　　对于em和rem的区别一句话概括：em相对于父元素，rem相对于根元素。

　　rem中的r意思是root（根源），这也就不难理解了。

 

Rem(浏览器支持还不是很理想)，他只相对html或body的字体尺寸(默认还是16px，除非你自己用font-size定义为其他)，没有了继承父级尺寸这个关系。

rem是根据根元素html的font-size大小来变化的。所以我们可以根据不同设备的宽度来设置对应的html的字体大小，从而实现自适应布局。

如何根据不同设备的宽度来设置html的字体？

在做页面时将设计稿的宽度缩放至640px,将1rem设为设计稿中的100px,因此屏幕的宽度为（640%100）=6.4rem

(function(win) {
    var doc = win.document;
    var docEl = doc.documentElement;
    var tid;

    function refreshRem() {
        var width = docEl.getBoundingClientRect().width;
        if (width > 540) { // 最大宽度
            width = 540;
        }
        var rem = width / 6.4; 
        docEl.style.fontSize = rem + 'px';
    }

    win.addEventListener('resize', function() {
        clearTimeout(tid);
        tid = setTimeout(refreshRem, 300);
    }, false);
    win.addEventListener('pageshow', function(e) {
        if (e.persisted) {
            clearTimeout(tid);
            tid = setTimeout(refreshRem, 300);
        }
    }, false);

    refreshRem();

})(window);

 

百分比：

（1）子元素的height、top、bottom是根据其包含块的高度进行计算的，即使父元素是absolute，也是相对于父元素，如果该高度没有指定（根据内容自适应），那么计算值为0；

（2）width、left、right、padding、margin是根据其包含块的宽度进行计算的；

（3）transform:translate、translateX、translateY是根据自身元素的实际宽高计算的

#con{
    position: relative;
    width: 100px;
    height: 100px;
    background: red;
}
.con2{
    position: absolute;
    width: 50%;
    height: 50%;
    background: yellow;
}
.con3{
    width: 50%;
    height: 50%;
    background: blue;
}

 

vw和vh相对于视口。

视口指浏览器的可视区域。

vw和vh是相对于视口的宽度和高度，若不是父元素的（CSS百分比是相对于他最近的父元素的高度和宽度），1vh=1/100的视图高度，1vw=1/100的视图宽度。

vmax是相对于视口的宽度或高度中较大的那个。

vmin是相对于视口的宽度或高度中较小的那个。

 

 pt：全程是points（磅），是一个绝对长度单位。常用于排版印刷。