vue大屏可视化布局

html {
  /* 将屏幕整个宽度设置为24rem，从而自动实现内容按照屏幕的大小进行缩放 */
  /* 屏幕大小比例 16:9 */
  font-size: calc(100vw / 24);
}
body {
  font-size: 0.12rem;
  width: 100vw;
  height: calc(100vw / 16 * 9);
}

*{
  padding: 0rem;
  margin: 0rem;
}

3、px 与 rem 的选择？
16px=1rem
1920*1080=16：9 （屏幕大小比例）
对于只需要适配少部分手机设备，且分辨率对页面影响不大的，使用px即可 。
对于需要适配各种移动设备，使用rem，例如只需要适配iPhone和iPad等分辨率差别比较挺大的设备。

4、vh和vw 相对于视口的高度和宽度，1vh等于1/100的视口高度，1vw等于1/100

的视口宽度，比如：浏览器高度900px，宽度为750px,

1vh=900px/100=9px,1vw = 750px/100=7.5px;很容易实现与同屏幕等高的框。