解析CSS/CSS3单位：px、em、rem、vh、vw、vmin、vmax

一、简要介绍

1. px（绝对单位）

像素，计算机屏幕上的一个点。页面按照精确的像素进行样式展示。

2. em（相对单位）

指字体高度。基准点为父节点字体的大小，浏览器默认字体为 16px（1em=16px），如果元素自身定义了 font-size，则按照自身的值进行计算。因此，整个页面内的1em可以是不同的值。

【e.g.】根元素样式 font-size:62.5%; 意思为 16px*62.5%=10px，即显示在页面的字体大小是 10px（1em=10px）。

em 的特点是 em 是个相对值，它会根据父级元素的大小而变化，但是如果嵌套了多个元素，要计算它的大小，就要使用 rem。

3. rem（相对单位）

可理解为“root em”, 相对根节点的字体大小来计算，是截止目前用的最多的单位。

4. vh（视窗高度）

viewpoint height，视窗高度，1vh 等于视窗高度的 1%。

【e.g.】元素 height: 10vh; 视窗高度为 100px，则元素高度为 height = 100px * 10% = 10px

5. vw（视窗宽度）

viewpoint width，视窗宽度，1vw 等于视窗宽度的 1%。

【e.g.】元素 width: 5vh; 视窗宽度为 200px，则元素宽度为 width = 200px * 5% = 10px

6. vmin

vw 和 vh 中较小的那个。

7. vmax

vw 和vh 中较大的那个。

二、补充介绍

1. vw、vh 与 % 百分比的区别

（1）% 是相对于父元素的大小设定的比率，vw、vh 是由视窗大小决定的。

（2）vw、vh 的优势在于能够直接获取高度，而用%在没有设置 body 高度的情况下，是无法正确获得可视区域的高度的。

2. vmin、vmax 的用处

在进行移动页面开发时，若使用 vw、wh 设置字体大小，在横屏和竖屏状态下，界面所显示的字体大小是不一样的。 由于 vmin 和 vmax 是当前较小的 vw 和 vh 和当前较大的 vw 和 vh。这里就可以用到 vmin 和 vmax，使文字大小在横屏和竖屏下保持一致。

3. vh、vw、vmin、vmax 的浏览器兼容

（1）桌面 PC

Chrome：自 26 版起就完美支持（2013年2月）

Firefox：自 19 版起就完美支持（2013年1月）

Safari：自 6.1 版起就完美支持（2013年10月）

Opera：自 15 版起就完美支持（2013年7月）

IE：自 IE10 起（包括 Edge）到现在还只是部分支持（不支持 vmax，同时 vm 代替 vmin）

（2）移动设备

Android：自 4.4 版起就完美支持（2013年12月）

iOS：自 iOS8 版起就完美支持（2014年9月）

三、利用JS缩放页面来控制页面的最大尺寸

<script type="text/javascript">
    (function(doc,win){
        var htmlScale = function(){
            console.log('2');
            oBdoy = doc.getElementsByTagName('html')[0];
            var domWidht = doc.documentElement.clientWidth;
            var myScale = 750/domWidht;
            if(domWidht){
                oBdoy.style.transform = 'scale('+myScale+')';
                oBdoy.style.transformOrigin = '50% '+0+'%';
            }else{
                oBdoy.removeAttribute('style','transform');
                oBdoy.removeAttribute('style','transformOrigin');
            }
             
        };
        htmlScale();
        win.addEventListener('resize',htmlScale,false);
    })(document,window);
</script>
复制代码

—————— To be continued…… ——————

转载于:https://juejin.im/post/5b63c3f2518825210576000e