分辨率兼容性问题的解决方案

1.px转rem（推荐）

1rem等于html根元素设定的font-size的px值；如果css里面没有设定html的font-size，则默认浏览器以1rem=16px来换算。

实现思路：获取视图的宽度，动态计算html的font-size。

document.documentElement.style.fontSize = document.documentElement.clientWidth / 10.8 + 'px'

clientWidth / 19.2 得到是布局视口下的rem基准值；我的显示器分辨率是1920*1080，为例 1rem＝100px），那么设计稿正好也是 1920*1080，所以对应的关系 clientWidth / 19.2＝＝设计稿的尺寸/x, 那么x=设计稿的尺寸/rem基准值。

rem和em的区别:

r就是root，rem的计算标准是根元素的font-size。而em计算标准是当前元素的 font-size 。很多博客说em的计算标准是父元素的font-size，其实不是的。只是当前元素没有定义font-size时，他会继承父元素的font-size。

2.百分比

不推荐，未知高度无法计算。

3.多媒体查询

一般用于pc端，移动端兼容

5.transform的scale

对网页进行缩放，但是需要注意的是项目中宽和高的尽量用%。