使用REM会出现什么问题，有没有PX会比REM更好的情况
因为在大多数场景下，用户使用更大的屏幕，是想看到更多的内容，而不是更大的字。所谓大多数场景，指的是除去以图片为主的纯展示，以及游戏等非主流的 Web 应用场景，在上述这些情况下使用 rem 甚至 vw 都无可厚非。但是如果在常规的以文字信息为主的页面中也大量使用 rem 这种黑科技，只有两种情况：设计师或者前端偷懒，懒得去想如何适配不同的屏幕，直接缩放了事；前端工程师还没有掌握 flex 等更优秀的布局方案。By the way，你们敢直视大量使用 rem 的页面在 PC 上的惨状吗？
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
abc
def
abc
//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
一个选择：确认要适配哪种屏幕，字号是多少，间距是多少。技术上再通过Media Query微调
@media(min-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-414px){
html{
font-size:17.664px;
}
}
17.664 = 414 * 16 / 375.
由此可以得到html的font-size计算公式为：font-size = deviceWidth * 16 /375;
前提是你的html有这条meta属性
所以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- 320px) {
html{
font-size: 13.65px;
}
}
@media only screen and (min- 360px) {
html{
font-size: 15.36px;
}
}
@media only screen and (min- 375px) {
html{
font-size: 16px;
}
}
@media only screen and (min- 390px) {
html{
font-size: 16.64px;
}
}
@media only screen and (min- 414px) {
html{
font-size: 17.66px;
}
}
@media only screen and (min- 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 的值