对于页面适配，应该使用px 还是rem

原文地址：https://mp.weixin.qq.com/s/MDlTs0MawX8iSM1IVpCkmg

css 中单位很多 %、px、em、rem，以及比较新的vw、vh等，每个单位都有特定的用途，而我呢，往往不知道什么时候该用什么，调重点总结一下

使用px，结合Media Query进行阶梯式的适配；
使用%，按百分比自适应布局；
使用rem，结合html元素的font-size来根据屏幕宽度适配；
使用vw、vh，直接根据视口宽高适配。

在这些大前提下，对小的细节做微调。比如使用px的时候，可能在小屏幕中，要对某个容器进行transform:scale(.8)，适当缩小处理。使用rem的时候，需要固定页面的左右间距为10px等。

开发总结：

在世界稿要求固定尺寸的元素上使用px。比如1px线，4px的圆角边框。
在字号、（大多数）间距上使用rem。
慎用em。

%、vw、vh都是根据参考对象按比例适配

%是参考父容器，vw和vh是参考视口。

为什么慎用em?

em会叠加计算。

//HTML
<span>
    abc
    <span>def</span>
    abc
</span>

//CSS
span{font-size:1.5em;}

效果

em的计算原理，它是根据当前元素的字号按比例计算的。

外层span的字号是16px(浏览器默认值)，1.5em之后是24px。由于字号是继承的，导致内部span 的字号继承过来是24px，再经过1.5em之后就成了36px。

所以，就算要用em的话，尽量不要用在继承属性（font-size）上，除非你真的清楚自己在做什么！

比如你想根据字号自动调整字符间距，可以这么做：

.content{
    font-size:1rem;
    letter-spacing:.03em;
}

rem VS. px

px的性质决定了它只能用于固定尺寸。

除了固定尺寸用px，其他大部分情况都可以用rem

现在考虑一个实际的开发场景，一般来说都是先有视觉稿才能开发。两种情况：一、假设视觉稿iPhone 6和iPhone 6+，及其他尺寸各出了一份，那你就按照Media Query去适配。二、设计师只给你一种机型的视觉稿，以iPhone 6为例，750×1334，2倍屏下转换后是375×667。

第一种情况，通过Media Query断点适配

第二种，要根据宽度为375px的稿子，扩展到适配任意宽度的屏幕

视觉稿如下：

测量后主要参数如下：

页面间距10px
文字间距10px，字号16px
A高度100px
B高度50px，上间距30px

HTML结构和CSS

<div class="box box-1">A.第一段内容</div>
<div class="box box-2">B.第二段内容</div>

body{
	padding: 10px;
	background-color: #f6f0ee;
}
.box{
	padding: 10px;
	font-size: 16px;
	color: #fff;
	box-sizing: border-box;
}
.box-1{
	height: 100px;
	background-color: #1daedc;
}
.box-2{
	margin-top: 30px;
	height: 50px;
	background-color: #ddbe97;
}

然后视觉开始提要求，大屏上要把字体放大、间距放大。

一个选择：确认要适配哪种屏幕，字号是多少，间距是多少。技术上再通过Media Query微调

@media(min-width:414px){

}

另一个选择：首先按rem作为字号，容器高度，外间距的单位。那么代码改为：

html{
	font-size: 16px;
}
body{
	padding: 10px;
	background-color: #f6f0ee;
}
.box{
	padding: 10px;
	font-size: 1rem;
	color: #fff;
	box-sizing: border-box;
}
.box-1{
	height: 6.25rem;
	background-color: #1daedc;
}
.box-2{
	margin-top: 1.875rem;
	height: 3.125rem;
	background-color: #ddbe97;
}

通过Media Query改变iPhone 6+ 的html 字号，其他元素的属性就会自动变化

@media(min-width:414px){
    html{
        font-size:17.664px;
    }
}

17.664 = 414 * 16 / 375.

由此可以得到html的font-size计算公式为：font-size = deviceWidth * 16 /375;

前提是你的html有这条meta属性

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

所以rem 有个明显的有点，它可以通过少量的代码解决大部分问题。

细节问题，用Media Query 微调

关于rem兼容性 PC端仅在IE9+支持。vw和vh一样，如果要考虑IE8兼容，那只能用px。移动端支持

html 的font-size该如何设置

由于（大部分）浏览器的默认字号为16px，所以一般来说把html的font-size归一化为16px是比较合适的实践方式。

常用的Media Query断点（以iPhone 6为基准）

@media only screen and (min-width: 320px) {
	html{
		font-size: 13.65px;
	}
}
			
@media only screen and (min-width: 360px) {
	html{
		font-size: 15.36px;
	}
}
			
@media only screen and (min-width: 375px) {
	html{
		font-size: 16px;
	}
}
			
@media only screen and (min-width: 390px) {
	html{
		font-size: 16.64px;
	}
}
			
@media only screen and (min-width: 414px) {
	html{
		font-size: 17.66px;
	}
}
			
@media only screen and (min-width: 640px) {
	html{
		font-size: 27.31px;
	}
}

大家可能还会看到一些文章中建议把html字号设置成62.5%

html{
    font-size:62.5%;
}

因为刚提到浏览器默认的字号是16px，因此换算成百分比就是62.5% = 1 / 16

那为什么要用百分比呢？因为考虑到辅助功能和浏览器设置。对于部分用户，可能会在手机或浏览器的设置中增大手机字号，这意味着对方平时看字是很费力的，所以他要放大。那把html的字号设置成百分比就很贴心了，会随着手机设置改变页面的字号

但是呢，就算你看到用62.5%的情况，有些间距也是不合理的，都做的不太好，特别是把文案做到图片上，对字号根本不敏感，所以缩放一定要考虑到位

另外，针对本小节开头用16px 的情况，这里在提供一招

用Media Query的缺点是什么？它是分段函数，对于宽度在[320，360]区间内的屏幕，会适用同一套方案。最完美的应该是线性函数，用vw即可

html{
    font-size:4.266667vw;
}

用一行代码代替之前6个冗长的Media Query，还不错吧

如何提高rem的可读性

当你知道html的font-size怎么设置后，肯定想问，难道我每次写代码时，还得做个除法，把rem计算出来吗

如果用到CSS预处理，这事情就好办了，以LESS为例，两部操作如下

// 1\.按iPhone 6的视觉稿，基准字号为16px,因此可以设置一个LESS变量。
@px:16rem;

//2\.通过LESS内置的除法自动运算。比如用到16px的字号时，写成16/@px即可，最后会计算成1rem

.example{
    font-size:16/@px;
    margin:20/@px 0;
    padding:20/@px 10/@px;
}

小结

本文介绍了rem的适配方式，如何设置html的font-size，如何更快的书写rem 的值

详情见https://mp.weixin.qq.com/s/MDlTs0MawX8iSM1IVpCkmg