前端web页面分辨率适配

前端屏幕分辨率适配 

前端屏幕分辨率适配主要是通过将px转换为rem来实现的。可以使用统一的转换插件flexible.js来实现这个功能。

首先，需要在页面中引入flexible.js，然后在css中使用rem作为单位。例如，可以将html的字体大小设置为12*dpr，其中dpr是设备的像素比，可以通过flexible.js获取。然后，在其他元素的样式中，也可以使用rem作为单位，例如，可以将一个元素的宽度设置为width/10 rem。此外，还需要在meta标签中设置viewport的属性，例如设置initial-scale、maximum-scale、minimum-scale和user-scalable等属性。

需要注意的是，不同设备的像素比可能不同，因此在设置rem时，需要根据设备的像素比进行缩放。例如，对于2和3的屏，可以使用2倍或3倍的方案，对于其他设备，可以使用1倍的方案。