使用vue.cli3+postcss来实现vw vh自适应

vue-cli3

vue-cli3新建的项目默认已经集成了postcss，所以不用我们单独安装配置

postcss插件

需要的postcss插件有 postcss-px-to-viewport 、postcss-write-svg 、postcss-viewport-units、
style-vw-loader，可以选择直接执行

注意版本问题

  1. npm i  postcss-px-to-viewport postcss-write-svg  postcss-viewport-units style-vw-loader --S
依赖 描述
postcss-px-to-viewport 用来把px单位转换为vw、vh、vmin或者vmax这样的视窗单位，也是vw适配方案的核心插件之一
postcss-write-svg 用来处理移动端1px的解决方案
postcss-viewport-units 可以处理伪元素单位转换问题
style-vw-loader 转换行内样式的loader

安装完毕后我们需要配置一下，在postcss.config.js中配置如下内容：

  1. /*
  2.  * @Author: your name
  3.  * @Date: 2020-03-27 09:15:45
  4.  * @LastEditTime: 2020-09-01 18:24:25
  5.  * @LastEditors: wangchaoxu
  6.  * @Description: In User Settings Edit
  7.  * @FilePath: \weidun\postcss.config.js
  8.  */
  9. module.exports = {
  10.   plugins: {
  11.     'postcss-import': {},
  12.     'postcss-url': {},
  13.     'postcss-aspect-ratio-mini': {},
  14.     'postcss-write-svg': {
  15.       utf8: false
  16.     },
  17.     'postcss-cssnext': {},
  18.     'postcss-px-to-viewport': {
  19.       viewportWidth: 1920, //  视窗的宽度，对应的是我们设计稿的宽度，移动端一般是750，如果是pc端那就是类似1920这样的尺寸
  20.       viewportHeight: 1080, // 视窗的高度，移动端一般指定1334，也可以不配置
  21.       unitPrecision: 3, // 指定`px`转换为视窗单位值的小数位数（很多时候无法整除）
  22.       viewportUnit: 'vw', // 指定需要转换成的视窗单位，建议使用vw
  23.       selectorBlackList: ['el-icon-more'], // 指定不转换为视窗单位的类，可以自定义，可以无限添加,建议定义一至两个通用的类名
  24.       minPixelValue: 1, // 小于或等于`1px`不转换为视窗单位，你也可以设置为你想要的值
  25.       mediaQuery: false, // 允许在媒体查询中转换`px`
  26.       exclude: /(\/|\\)(node_modules)(\/|\\)/ //不转换我们引入的第三方包
  27.     },
  28.     'postcss-viewport-units': {
  29.       filterRule: rule => rule.selector.indexOf('::after') === -1 && rule.selector.indexOf('::before') === -1 && rule.selector.indexOf(':after') === -1 && rule.selector.indexOf(':before') === -1
  30.     },
  31.    }
  32. };
  33. module.exports = {
  34.   "plugins": {
  35.     // "postcss-import": {},
  36.     // "postcss-url": {},
  37.     // to edit target browsers: use "browserslist" field in package.json
  38.     "postcss-write-svg": {
  39.       uft8: false
  40.     },
  41.     "postcss-cssnext": {},
  42.     "postcss-px-to-viewport": {
  43.       viewportWidth: 750, // 设计稿宽度
  44.       viewportHeight: 1334, // 设计稿高度，可以不指定
  45.       unitPrecision: 3, // px to vw无法整除时，保留几位小数
  46.       viewportUnit: 'vw', // 转换成vw单位
  47.       selectorBlackList: ['.ignore', '.hairlines'], // 不转换的类名
  48.       minPixelValue: 1, // 小于1px不转换
  49.       mediaQuery: false, // 允许媒体查询中转换
  50.       exclude: /(\/|\\)(node_modules)(\/|\\)/ //不转换我们引入的第三方包
  51.     },
  52.     "postcss-viewport-units": {},    
  53.   }
  54. }

vw兼容方案

如果您想要兼容所有的低版本浏览器，可以使用Viewport Units Buggyfill
1. 引入js文件

  1. <script src="//g.alicdn.com/fdilab/lib3rd/viewport-units-buggyfill/0.6.2/??viewport-units-buggyfill.hacks.min.js,viewport-units-buggyfill.min.js"></script>
  1. 在HTML文件中调用viewport-units-buggyfill
    1. window.onload = function () { 
    2. window.viewportUnitsBuggyfill.init({
    3.   hacks: window.viewportUnitsBuggyfillHacks
    4. }); 
    5. }
    ps: 使用vw的polyfill解决方案会在用到的vw的地方添加content，会影响到img和伪元素，需要全局添加
    1. .img { content: normal !important; }

    如果您想在react中使用，请参考这篇https://segmentfault.com/a/1190000014185590
    https://blog.csdn.net/zgpeterliu/article/details/80519634
  • package.jsom ```json { “name”: “vue-cesium-template”, “version”: “0.1.0”, “private”: true, “scripts”: { “serve”: “vue-cli-service serve —mode serve”, “build”: “vue-cli-service build —mode build”, “lint”: “vue-cli-service lint” }, “devDependencies”: {
    “postcss-px-to-viewport”: “^1.1.1”,
    “postcss-viewport-units”: “^0.1.6”, “postcss-write-svg”: “^3.0.1”, } }

```