前端不同分辨率适配

基本思路就是：利用rem单位，就是相对于跟（html）字体的大小，来计算相应元素的宽高

1. 一般将html的font-size设置为：20px或30px或50px或100px
2. 还有利用浏览器默认自己大小(16px)也就是16px*62.5%=10px，这样就是html{font-size:62.5%;}，而不是html{font-size:10px;}因为浏览器（PC）最小就是12px。这样一来1rem = 10px；
   我们来简单的看一下：

浏览器默认字体大小为16px，那么，所有未经调整的浏览器都符合: ①1em=16px。如果定义16px为100%，则②1em=16px=100%，都除以16，则③0.0625em=1px=6.25%。

这样的换算不是整数，为简化font-size的换算，如果定义font-size为62.5%，那原来的默认字体16px，就成了④16px*62.5=10px，此时，再把③乘以10，得到⑤0.625em=10px=62.5%，近似于1em。

所以一般都近似认为10px=1em，那以后px换算成em就好办了，直接除以10即可，比如20px，换算为em，为2em。

前端不同分辨率适配

原文：https://www.cnblogs.com/lhj1168/p/14790982.html