vue3-移动端适配

前端适配技术：

• 百分比(%),em,媒体查询 css @media and(min-width:1000px ) { .main {display:none } }

• flex布局，rem (根字号html标签)

• vw,vh,grid布局

• flex布局和响应式布局区别

1. // 下载适配插件amfe-flexible
            npm i -S amfe-flexible

    // 在main.js中，引入rem适配文件，目的是更改“根字号”
            import  "amfe-flexible"

2. 安装 postcss-pxtorem：将px转换为px
        npm install postcss postcss-pxtorem -D

配置：// 在项目的根目录下新建   postcss.config.js  文件     此文件自动生成，若没有，手动添加

// postcss.config.js
module.exports = {
  plugins: {
    // postcss-pxtorem 插件的版本需要 >= 5.0.0
    'postcss-pxtorem': {
      rootValue({ file }) {
                // 判断是否是vant的文件 如果是就使用 37.5为根节点字体大小
                // 否则使用75 因为vant使用的设计标准为375 但是市场现在的主流设置尺寸是750