适配大屏方案

发布时间 2023-06-08 18:06:49作者: Stitchhhhh

根据尺寸适配

<style lang="scss">
//适配大屏3840,可以是区间
@media screen and (min-width: 3840px){
  $oneVw: 21.6;

  @function getvw($data) {
    @return $data/$oneVw * 1vh;
  }
  .main {
    height: getvw(480);
  }
}
</style>

 

根据宽高比例适配

<style lang="scss">
@media screen and (min-aspect-ratio:16/32){
  $oneVw: 10.8;

  @function getvw($data) {
    @return $data/$oneVw * 1vh;
  }
  .main {
    height: getvw(480);
  }
}
</style>