关于web开发---适配布局

1.通过媒体查询

2.根据显示屏大小动态计算出根元素字体大小。（视口单位vw）

视口单位：

vm:1vm=视口宽度的1%

vh:1vh=视口高度的1%

vmin:选取vw\vh中最小的那个

vmax:选取vw和vh中最大的那个

方案一：设计稿750px->100vw

1.创建scss函数

$viewportWidth: 1920;//设计稿宽度
$viewportHeight: 1080;//设计稿高度

@function pxTovw($px) {
  @return $px*100vw/$viewportWidth;
}

2.在vue.config.js中插入,使这个函数能够全局使用

module.exports = {
  css: {
    loaderOptions: {
      sass: {
        data: `@import "@/styles/func.scss";`
       // prependData: `@import "~@/assets/styles/variables.scss";`
      }
    }
  },
}

方案二：css计算属性