前端页面如何在不同分辨率及不同系统缩放比下自适应？

Question

假如UI给的设计图分辨率是1920*1080，前端按照这个分辨率开发完的页面只能在屏幕窗口大小一致的情况下显示正常。如果系统缩放调整到150%，页面上的文字和空隙就显得特别大。或者在浏览器非全屏 body 高度不足1080时，会产生滚动条。

提问： 如何让页面在不同分辨率或者不同缩放比例下自适应于屏幕，且不能产生滚动条、文字大小和间隙大致保持一致呢？

尝试方案：
1、用 rem布局 ，但是页面运用第三方UI库，如何将第三方组件上的 px转化为 rem?
2、用 媒体查询 ，是不是不同分辨率下的css都得写一套？

Answer 1

使用rem布局的话可以有这3种方案去改造下你的第三方ui库

1. 比较推荐使用现有插件进行转化 rollup、webpack都有
   比如 https://www.npmjs.com/package...
2. 写个node.js脚本自己转化
   一般就是ast->rules->...
3. 如果px和rem的转化规则不复杂
   直接利用正则匹配在编辑器替换