移动端适配新方案：lgg-flexible 动态调整 rem 和 dpr

这个方案结合flex、rem和dpr三个技术点，来达到更流畅的用户体验。 首先，我们来了解一下什么是rem。rem（root em）是CSS3中的一个新的单位，它类似于em单位，不过rem是相对于根元素（html元素）的字体大小计算值，而em则是相对于其父元素的字体大小计算值。这使得rem非常适合用于页面的全局单位，尤其是用于响应式布局中。 而dpr，全称为Device Pixel Ratio，即设备像素比，是物理像素与设备独立像素（也即CSS像素）的比例。在高分辨率的设备上，一个CSS像素可能会占用多个物理像素，这就造成了移动端布局的适配问题。通过动态调整dpr，可以使得页面在不同分辨率的设备上呈现出更好的显示效果。 lgg-flexible方案结合了rem和dpr的技术点，通过动态计算和调整这两个值，来实现移动端的适配。在实际使用中，lgg-flexible会根据设备的dpr值，动态调整html元素的字体大小，使得页面中的rem单位能够对应到正确的像素值。这样，无论在什么分辨率的设备上，页面都能够保持较好的布局效果。 此外，lgg-flexible还提供了一些特性，以解决rem适配在PC端可能带来的问题。通过body[data-dpr=*] css选择器，可以控制字体大小，实现高清适配。同时，当用户在PC端访问时，默认关闭高清适配，此时可以传入pcREM作为pc端的rem值，通过body[data-mobile="false"]调控pc与mobile的样式。 至于如何在项目中使用lgg-flexible，可以通过npm进行安装，然后在项目中进行导入。这样，就可以在项目中轻松地使用lgg-flexible方案，来实现移动端的适配。 总结来说，lgg-flexible方案通过动态控制rem和dpr，结合flex布局，提供了一种高效的移动端适配方式。它不仅适用于移动端设备，还考虑了PC端的适配问题，是一款功能强大的响应式布局解决方案。"