1. 动态设置宽高

动态设置宽高

可视化页面宽高比固定为 16:9
当浏览器宽高比大于16:9时，可视化页面的宽度 = 浏览器高度 (16 / 9)
当浏览器宽高比小于16:9时，可视化页面的宽度=浏览器宽度
可视化页面的高度 = 可视化页面的宽度 / （16 / 9）
设置1rem = 页面宽度 / 100
元素尺寸 / 页面宽度 = 元素设计尺寸 / 页面设计宽度
元素尺寸 = 元素设计尺寸 / 页面设计宽度 页面宽度 = 元素设计尺寸 / 页面设计宽度 100rem
因为是大屏项目，所以把pageWidth的最小值写死为1400px, 小于这个值页面会错乱，影响效果

const clientWidth = document.documentElement.clientWidth
const clientHeight = document.documentElement.clientHeight
const pageWidth = clientWidth / clientHeight > 16 / 9 ? clientHeight * (16 / 9) : 1400
const pageHeight = pageWidth / (16 / 9)
const string = `<style>html{
      font-size: ${pageWidth / 100}px
    }</style>`
document.write(string)

<div id="root"></div>
<script>
  root.style.width = pageWidth + 'px'
  root.style.height = pageHeight + 'px'
  // 当页面高度小于屏幕高度时添加margin使页面垂直居中
  root.style.marginTop = pageHeight < clientHeight ? (clientHeight - pageHeight) / 2 + 'px' : 0
</script>

自定义px函数设置元素尺寸

@function px($n) {
  @return $n / 2420 * 100rem;
}
.home {
  width: px(367);
  height: px(315);
  border: 1px solid red;
}