px、em、rem适配移动端字体大小

px、em、rem

px 是固定的长度单位

em 是父元素的font-size（字体大小）的值，常用来设置首行缩进2em（2字符）

rem 是根节点（html，body）的font-size（字体大小）的值，可以用来做移动端的自适应。

三者介绍与区别，请见上一篇米扑博客：HTML CSS 字体大小 pt、px、em、rem 用法详解

为什么要适配移动端

px像素（pixel）

相对长度单位。相对于显示器屏幕分辨率而言。PC端使用px倒也无所谓，可是在移动端，因为手机分辨率种类颇多，不可能一个个去适配，这时px就显得非常无力，所以就要考虑em和rem

相对于父节点的font-size，会有一些组合的问题。比如你把body的font-size定义为50%，一般地会是8px。

那么你在body里字体大小就是 1em=8px

可当你定义了一个div，然后把字体设置成了75%，请问，现在的1em等于多少？

这个时候你会发现，原来他继承了body的值，现在字体更小了，变成了6px！

因为em是相对于父节点的单位，这么嵌套下去，你要数嵌套层级和比例，你会哭的饿...... (幸好出现了rem)

rem

相对长度单位，指相对于根元素的字体大小的单位。

rem只会相对html的值，不会受到父级的影响，这样的好处在于：从em里的例子来讲，1rem始终会等于8px。

使用的时候不需要重新计算rem此时的大小。

rem因为是css3增加的，所以ie8或以下请无视。

屏幕适配的几种方法（流式布局、固定宽度、响应式、通过viewport进行缩放、使用rem）

1、流式布局

在页面布局的时候都是通过百分比来定义宽度，但是高度大都是用px来固定住，所以在大屏幕的手机下显示效果会变成有些页面元素宽度被拉的很长，但是高度还是和原来一样，实际显示非常的不协调，这就是流式布局的最致命的缺点

往往只有几个尺寸的手机下看到的效果是令人满意的，其实很多视觉设计师应该无法接受这种效果，因为他们的设计图在大屏幕手机下看到的效果相当于是被横向拉长来一样。

流式布局并不是最理想的实现方式，通过大量的百分比布局，会经常出现许多兼容性的问题，还有就是对设计有很多的限制，因为他们在设计之初就需要考虑流式布局对元素造成的影响，只能设计横向拉伸的元素布局，设计的时候存在很多局限性。

2、固定宽度

把页面设置成320的宽度，超出部分留白，这样做视觉，前端设计都挺挺开心，UI再也不用被流式布局限制自己的设计灵感了，前端也不用流式布局。

但是这种解决方案也是存在一些问题，例如在大屏幕手机下两边是留白的，浪费了宝贵的可用空间（放几个广告也好啊，我错了...）

还有一个就是大屏幕手机下看起来页面会特别小，操作的按钮也很小

3、响应式

响应式这种方式在国内很少有大型企业的复杂性的网站在移动端用这种方法去做，主要原因是工作大，维护性

难，所以一般都是中小型的门户或者博客类站点会采用响应式的方法从web page到web app直接一步到位，因为这样

反而可以节约成本，不用再专门为自己的网站做一个web、app的版本。

4、通过viewport进行缩放

以320宽度为基准，进行缩放，最大缩放为320*1.3 = 416，基本缩放到416都就可以兼容iphone6 plus的屏幕了，这个方法简单粗暴，又高效。

说实话，我觉得他和用接下去我们要讲的rem都非常高效，不过有部分同学使用过程中反应缩放会导致有些页面元素会糊的情况。

5、使用 rem 相对字体

rem 等比例适配所有屏幕，通过js来判断当前屏幕大小，进而设置html的font-size

代码里面rem的值就是Ui设计稿上量的px除以100就是你代码中要写的rem值。

(function(){
    var currClientWidth,
        fontValue,
        originWidth;
    originWidth = 750;	//ui设计稿的宽度，一般750或640
    __resize();

    window.addEventListener('resize', __resize, false);

    function __resize() {
        currClientWidth = document.documentElement.clientWidth;
        if (currClientWidth > 768){
            currClientWidth = 768;
        } 
        if (currClientWidth < 320){
            currClientWidth = 320;
        } 
        fontValue = ((625 * currClientWidth) / originWidth).toFixed(2);
        document.documentElement.style.fontSize = fontValue + '%';
    }
})();
// 当前假如当前分辨率是375， 设计稿分辨率是750
// 750/375=0.5
// 比例关系是0.5倍
// 再算一下你要换算1rem等于多少px，
// 假如我要100， 100/16=6.25
// 把这个换算的乘以刚才得出的比例
// 0.5*625=312.5
// 最后还拼接了一个百分号 = 312.5%
// 就是在375分辨率下 1rem = 312.5%
// 312.5% * 16px = 50px

前端设置使用 rem 最经典代码

下面代码在是中国平安工作时，身边的一个同事写的，兼容性特别好,移动端建议使用。

(function(doc, win) {
	var docEl = doc.documentElement,
		resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
		recalc = function() {
			var clientWidth = docEl.clientWidth;
			if (!clientWidth) return;
			docEl.style.fontSize = 50 * (clientWidth / 375) + 'px';
		};
	if (!doc.addEventListener) return;
	win.addEventListener(resizeEvt, recalc, false);
	doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window)

代码说明：

docEl.style.fontSize = 50 * (clientWidth / 375) + 'px';

例如：手机竖屏的宽度为 750px，则 fontSize = 50 * (750 / 375) = 100px

像素就可以直接使用rem，比如 font-size: 0.2rem; 即 font-size: 20px;

rem 做移动端适配

一般长度最好是除得尽的数值，例如40，50。

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>mimvp blog</title>
    <script language="JavaScript" type="text/javascript">

        var html = document.documentElement;
        var htmlWidth = document.documentElement.clientWidth;

        //html.style.fontSize = htmlWidth/27+'px'; //如：设计图1080宽度，将屏幕分为27份，每份为设计图的40px
        html.style.fontSize = htmlWidth/15+'px';   //如：设计图750宽度，将屏幕分为15份，每份为设计图的50px

    </script>
    <style>
        *{
            margin: 0;
            padding: 0;
            list-style: none;
        }
        .box{
            width: 7.5rem;     /* 相当于设计图上的7.5*50px     设置的值=设计图上的长度/每份的长度 */
            height: 2.5rem;  /* 相当于设计图上的2.5*50px  */
            border: 1px solid #000;
        }

    </style>
</head>
<body>
<div class="box"></div>
</body>
</html>

代码说明：

//html.style.fontSize = htmlWidth/27+'px'; // 如：设计图1080宽度，将屏幕分为27份，每份为设计图的40px
html.style.fontSize = htmlWidth/15+'px'; // 如：设计图750宽度，将屏幕分为15份，每份为设计图的50px

width: 7.5rem; /* 相当于设计图上的7.5*50px 设置的值=设计图上的长度/每份的长度 */
height: 2.5rem; /* 相当于设计图上的2.5*50px */

参考推荐：

HTML CSS 字体大小 pt、px、em、rem 用法详解

CSS 自适应多屏大小的 @media 用法详解

PC网站自动适配手机网页的方法技巧

PC端网页自适应手机屏幕大小

JS检测移动端自适应屏幕大小

HTML css、id、name、js 代码命名规范

HTML CSS 块级标签的用法总结

常用的HTML标签和属性解释

米扑科技公司的代码命名规范

BootStrap (2) —— 布局排版