网页常见单位： px em pt % rem vw、vh、vmin、vmax ， rem 使用

1.网页常见单位： px em pt vwvh rem

1.1

px单位名称为像素，相对长度单位，像素（px）是相对于显示器屏幕分辨率而言（最终解析单位）

em单位名称为相对长度单位。相对于当前对象内文本的字体尺寸（相对于父元素的字体大小的单位，那如果你要设置一个元素的宽度，高度，那么就得去看他父级的大小，如果父级也是em单位，你又得去找他的父级，得一层层计算，才能得到准确的像素值~）

pt单位名称为点（Point），绝对长度单位一般老版本的table使用长度大小单位但是现在基本上没有使用

（

　　换算：浏览器的默认字体高度16px，1em=16px 12px相当于9pt长度

）

% 相对于父元素的大小设定的比率

1.2

css3 新增：

vwvh 相对于视口的宽度。视口被均分为100单位的vw （相当精确的使用，不然偏差很大，适用于宽泛布局）

vmin 和 vmax 是当前较小的 vw 和 vh 和当前较大的 vw 和 vh 使得文字大小在横竖屏下保持一致

rem rem相对的是HTML根元素

参考链接：

css3新单位vw、vh、vmin、vmax的使用详解

css 参考手册

2.rem 使用（适用于等比缩放场景，当布局差异化还是得 media 来区分）

等比缩放思想简洁代码

2.1 要点：

rem是以html为基准

主流浏览器的font-size默认值为16px 1rem=16px

浏览器支持最小字体不同如谷歌 12px （当设置10px时，生效的是12px）

2.2 使用

html{

font-size: 62.5%;

}

body{

font-size: 1.4rem;

}

设置 html 字体为10px，body设置为14px，其余距离换算都是 / 10 。

better：

html{

font-size: 625%;

}

body{

font-size: 0.14rem;

}

设置 html 字体为10px，body设置为14px，其余距离换算都是 / 100 。

js 代码 ( 平滑过渡可以设置缓动或者直接用 jq )

        (function (doc, win) {
            var docEl = doc.documentElement,
                resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
                recalc = function () {
                    var clientWidth = docEl.clientWidth;
                    if (!clientWidth) return;
                    if (clientWidth >= 640) {               
                        // docEl.style.fontSize = '100px';
                        docEl.style.fontSize = 100 * (clientWidth / 640) + 'px';
                    } else {
                        docEl.style.fontSize = 100 * (clientWidth / 640) + 'px';
                    }
                };


            if (!doc.addEventListener) return;
            win.addEventListener(resizeEvt, recalc, false);
            doc.addEventListener('DOMContentLoaded', recalc, false);
        })(document, window);

View Code

tips：如果初次加载页面闪动：由大变小

1.可以改变透明度来缓解：初始设置页面body visibility: hidden; 字体缩放完成，再弄回正常的 visibility: visible;

2. 设置一系列算好的 media 字体

如：

@media (min- 640px){html{font-size: 85.3333px;} }

@media (min- 750px){html{font-size: 100px;} }

2.3 历史

在rem概念没引入前我们的做法是，以最小的屏幕（iPhone）做一版数据出来，然后通过js去控制viewport 的 initial-scale （网页缩放比例）

如：iPhone4下：

<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0 />

iPhone6需要调整缩放比例 initial-scale=375/320 =1.18

<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.18 />

2.4 相关链接

移动端适配之REM