【大屏设计方案】

一、非等比放大(填充满整个屏幕)

目的屏幕比例大小和设计稿的差的不多

相差不多的话也可以如下取rem，不同点不用根据rem 设置外层layout的，宽度直接用100vw,高用100vw，整体布局分布用百分比设置高度宽度，中间用flex=1撑开，再里面的布局用流体式。

目的屏幕比例大小和设计稿的差很多

这就很麻烦，但是也得设置放大比例，一般以宽度为基准 如下获取rem,宽度直接用100vw,高用100vw，整体布局就得用流体布局。

二、等比放大（比如16：9）

理想中的效果，当屏幕的尺寸比例刚好是16：9时，页面能刚好全屏展示，内容占满显示器，但是如果屏幕过长或者过宽的情况也要保持16：9的情况的话，就会出现一下的如下情况

解决方案

使用rem 毋庸置疑的
首先木伦是vue 还是react 我们都有html 文件直接在html文件下的script标签下直接监听目前屏幕的大小，例如我们要求就是16/9，我们获取目前的屏幕的宽高比
如果宽高比大于目前的16/9 就说明过宽了，那么就用高度为基准求目前的rem。

比如原比例的默认字号 1rem = 16px
那就是 1rem = 目前的高/1920 ×16

如果宽高比小于目前的16/9 就说明过高了，那么就用宽度为基准求目前的rem。

比如原比例的默认字号 1rem = 16px
那就是 1rem = 目前的宽/1080 ×16

document.documentElement.clientWidth
获取浏览器窗口文档显示区域的宽度，不包括滚动条。
document.documentE