css-px em rem vm vh vmin vmax-1.1

1、px

    相对显示器屏幕分辨率而言

2、em

    相对对象内文本的字体尺寸

    如果当前未设置，则相对浏览器默认字体尺寸

<div class="div1">div1
    <div class="div2">div2
        <div class="div3">div3</div>
    </div>
</div>

 

div{
    font-size:1.5em;
}

效果： 

div1、div：1.5 * 目前div的尺寸 = 1.5 * 默认

div2、div: 1.5 * 目前div的尺寸 = 1.5 * 1.5 * 默认

div3、div: 1.5 * 目前div的尺寸 = 1.5 * 1.5 * 1.5 * 默认

3、rem

    相对于根元素的比例

4、vh vw

    相对于视口的高度和宽度

    1vh 等于1/100的视口高度，1vw 等于1/100的视口宽度。

5、vmin vmax

    关于视口高度和宽度两者的最小值或者最大值

6、%

    关于像素的比例

    手机版的外框尽量不要使用%。可以使用vw，因为vw是相对于手机界面的，百分比就不清楚了。