乐趣区

关于前端:壁虎科技前端移动端和PC端自适应解决方案支持vite打包配置

jiezi

需要

  • 挪动端自适应
  • pc 端自适应（在肯定屏幕范畴内）

实现原理

应用 amfe-flexible 和 postcss-px2rem 依赖包，编译我的项目后主动把 px 转换成 rem，会依据屏幕大小来动静扭转 html 的 font-size 值

想理解 rem 实现自适应的原理，大家能够自行谷歌，这里就不讲原理了

不懂原理的同学们也没关系，上面跟着操作就能够实现。

实现教程

第一步，装置组件依赖 

npm install amfe-flexible -S
npm install postcss-px2rem -S

第二步，引入 lib-flexible.js

上面是以 vue 我的项目作为例子

在入口文件 main.js 中引入 

import "amfe-flexible/index.js";

第三步，在目录 public/index.html 文件退出上面一行代码 

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">

第四步，配置 postcss-px2rem

如果是 vue-cli3 构建的我的项目，那么在根目录找到 vue.config.js 文件，（没有找到的话，就新建一个）

配置内容如下 

css: {
    loaderOptions: {css: {},
        postcss: {
          plugins: [require("postcss-px2rem")({remUnit: 75})
          ]
       }
    }
}

下面一段代码放到 module.exports = {}，的大括号外面

残缺代码如下：

module.exports = {
    // 根本门路
    publicPath: './',
    css: {
        loaderOptions: {css: {},
          postcss: {
        plugins: [require("postcss-px2rem")({remUnit: 75})
        ]
      }
        }
    },
    // 代理
    devServer: {
        port: 8080,
        // host: 'localhost',
        https: false, // https:{type:Boolean}
        open: true, // 配置主动启动浏览器
        disableHostCheck: true,
        "proxy": {
        "/*": {
            "target": "http://xxx",
            "changeOrigin": true
        }
        }
    },
}

下面的 remUnit: 75, 这里的设置 75，就是设计图是 750px，如果你的设计图是 640px, 那么你改成 64 即可，如果你的设计图是 1920px，那么你改成 192 即可

如果你的我的项目是 vue-cli2 构建的

装置依赖 postcss-pxtorem

npm i -D postcss-pxtorem

找到根目录下.postcssrc.js 文件，在外面增加以下代码：

module.exports = {
  plugins: {'postcss-import': {},
    'postcss-url': {},
    autoprefixer: {browsers: ['Android >= 4.0', 'iOS >= 7']
    },
    'postcss-pxtorem': {
      rootValue: 75,
      propList: ['*', '!border*']
    }
  }
}

propList 示意匹配的属性 (示意匹配所有属性) 能够在外面用 !border 示意不装备边框，这样不会把边框 1px 变成 1rem

在 css 中不想 px 转 rem 能够这样, 在款式前面写 /no/ 正文即可 
.nav {
  width: 400px;
  height: 300px;
  background: red;
  border: 1px solid black; /*no*/
}

以上配置完后，关上你们的我的项目编译后的页面，关上调试页面扭转宽度就看到了，html 的 font-size 值实时产生扭转，和你写的 css px 值，都主动转成 rem 了

第五步，pc 端做自适应解决方案

以上的是全自适应，如果你想管制自适应的范畴，比如说，你做 pc 我的项目，想在 1300px – 1800px 之间做自适应，小于 1300px 就设置个固定的 html font-size 值，大于 1800px 就设置个固定的 html font-size 值

这样就能够使得 pc 我的项目布局的页面，不至于始终放大自适应，也不至于始终放大

要害原理是通过媒体查问来管制，代码如下, 在你公共款式（或者全局款式）文件写上 

/* 屏幕大于 1800px 的时候写死 html 的 font-size 值为 200px */
@media screen and (min-width: 1800px) {
    html {
        font-size: 200px !important;
        /*no*/
    }
}
/* 屏幕小于 1300px 的时候写死 html 的 font-size 值为 130px */
@media screen and (max-width: 1300px) {
    html {
        font-size: 130px !important;
        /*no*/
    }
}

以上只是一个例子，挪动端你就能够不必设置了，pc 端，你想在什么范畴，依据你的我的项目页面调就好了

vite 打包的我的项目配置

新建个 postcss.config.js 文件，下如下代码

装置依赖 postcss-pxtorem

npm i -D postcss-pxtorem
module.exports = {
  plugins: {
    autoprefixer: {overrideBrowserslist: ['Android >= 4.0', 'iOS >= 7']
    },
    'postcss-pxtorem': {
      rootValue: 192,
      propList: ['*', '!border*']
    }
  }
}

根目录创立 .browserslistrc 文件 

last 2 versions
> 1%
iOS 7
last 3 iOS versions

记得先写后面三步!!!

踩坑以及解决

当你应用 webpack 打包的时候，如果你在款式里写了 /*no*/, 就是不想 px 转换成 rem 的时候，例如下面说过的代码 

/* 屏幕大于 1800px 的时候写死 html 的 font-size 值为 200px */
@media screen and (min-width: 1800px) {
    html {
        font-size: 200px !important;
        /*no*/
    }
}

这个 px 不转 rem 是依赖正文的，可是生产环境打包的时候就会把正文去掉，这样导致你写了 /*no*/ 不转这条 css 属性，也没成果，打包删除了正文，它就会主动帮你转了。

解决办法一. 能够把款式写到 index.html 文件的 style 标签中

这样打包不会删除 index.html 的 css 正文，如果你的 webpack 也把 index.html 的正文给删除了，那么你能够通过 webpack 把 index.html 不删除正文，这个自行谷歌搜寻很多不打包压缩 index.html 文件，我我的项目不会删除 index.html 的正文

解决办法二. 通过配置 sass-loader，使得打包时不删除所有的 css 正文

参考文章：webpack 中 postcss-px2rem 生产环境中正文生效

参考文章

前端中应用 amfe-flexible 和 postcss-pxtorem

vite 中配置 postcss 与 postcss-plugin-px2rem

退出移动版