1920*1080的pc端设计稿，怎么适配不同分辨率的电脑？

Question

设计想1920*1080的设计图，在不同分辨率的电脑下都要达到和设计图相同比例，而且浏览器放大缩小也要适配，并且还要一屏显示完整页的内容。
相当于1920*1080的设计图，是按一屏显示的，内容中还有echarts，怎么保证在小屏幕上能一屏显示完，并且内容不压缩。说白了就像是小屏上能等比缩放设计图
尝试过postcss-px-to-viewport 方案，按1920的viewportWidth来设置，然后按设计图的大小写，结果却不尽人意
有没有大佬知道有没有完美的解决方案

Answer 1

如果说你只是要按屏幕比例缩放的话，只要把 viewport meta 设置为按照原尺寸显示并且不允许用户缩放就行了。例如 initial-scale=1.0 和 user-scalable=no。

阿里提出的 px2rem 的方案流行过一段时间，但其实并没有很好的解决问题，所以现在已经除废弃状态了。

其实多尺寸暂时没有一个完美的解决答案，最优解其实是按照不同的视窗大小去做适配。就是以前提到的响应式布局。也就是说UI需要按照不同的设备去设计多张设计稿，然后前端使用 @media 来做适配。当时 BS 提出栅格系统的概念就是为了处理这种情况。

Answer 2

之前在一家公司用过vw的方式 1像素就是 100vw/1920 = 0.052vw
但是这种是可以向大分辨率兼容 小一点的话也可以 太小了就没法看了