如何在vue中使用vw移动端适配

Author Avatar
AppleSun 7月 02, 2018

转载修改自大漠的 vw适配方案。vue 项目中使用vw 做移动端适配

1
2
3
npm i postcss-aspect-ratio-mini postcss-px-to-viewport postcss-write-svg postcss-cssnext postcss-viewport-units cssnano -S

npm i cssnano-preset-advanced --save-dev

接下来对 .postcssrc.js 做出配置:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
// https://github.com/michael-ciniawsky/postcss-load-config

module.exports = {
  plugins: {
    'postcss-import': {},
    'postcss-url': {},
    'postcss-aspect-ratio-mini': {},
    // to edit target browsers: use "browserslist" field in package.json
    autoprefixer: {}, //被cssnext和 cssnano 所带的 autoprefixer 干掉了
    "postcss-write-svg": {
      utf8: false
    },
    'postcss-cssnext': {},
    'postcss-px-to-viewport': {
      viewportWidth: 750, // 视窗的宽度，对应的是我们设计稿的宽度，一般是750
      viewportHeight: 1334, // 视窗的高度，根据750设备的宽度来指定，一般指定1334，也可以不配置
      unitPrecision: 3, // 指定`px`转换为视窗单位值的小数位数（很多时候无法整除）
      viewportUnit: 'vw', // 指定需要转换成的视窗单位，建议使用vw
      selectorBlackList: ['.ignore', '.hairlines'], // 指定不转换为视窗单位的类，可以自定义，可以无限添加,建议定义一至两个通用的类名
      minPixelValue: 1, // 小于或等于`1px`不转换为视窗单位，你也可以设置为你想要的值
      mediaQuery: false // 允许在媒体查询中转换`px`
    },
    'postcss-viewport-units': {},
    cssnano: {
      preset: 'advanced',
      autoprefixer: false,
      'postcss-zindex': false
    }
  }
}

在不想要把px转换为vw的时候，首先在对应的元素（html）中添加配置中指定的类名.ignore或.hairlines(.hairlines一般用于设置border-width:0.5px的元素中)

在哪些地方可以使用vw来适配我们的页面。根据相关的测试：

  • 容器适配，可以使用vw
  • 文本的适配，可以使用vw
  • 大于1px的边框、圆角、阴影都可以使用vw
  • 内距和外距，可以使用`vw

如果我们想要做一个188:246（188是容器宽度，246是容器高度）这样的比例容器，只需要这样使用：

1
2
3
[w-188-246] {
    aspect-ratio: '188:246';
}

有一点需要特别注意：aspect-ratio属性不能和其他属性写在一起，否则编译出来的属性只会留下aspect-ratio的值

border-image 方式 处理底框1px：

1
2
3
4
5
6
7
8
9
10
11
12
@svg 1px-border {
	height: 2px;
	@rect {
		fill: var(--color, black);
		width: 100%;
		height: 50%;
	}
}
.example {
	border: 1px solid transparent;
	border-image: svg(1px-border param(--color #00b1ff)) 2 2 stretch;
}

background-iamge方式来处理1px:

1
2
3
4
5
6
7
8
9
10
@svg square {
	@rect {
		fill: var(--color, black);
		width: 100%;
		height: 100%;
	}
}
#example {
	background: white svg(square param(--color #00b1ff));
}

CDN

viewport-units-buggyfill主要有两个JavaScript文件：viewport-units-buggyfill.js和viewport-units-buggyfill.hacks.js。你只需要在你的HTML文件中引入这两个文件。比如在Vue项目中的index.html引入它们

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>

第二步，在HTML文件中调用viewport-units-buggyfill，比如：

1
2
3
4
5
6
7
<script>
    window.onload = function () {
        window.viewportUnitsBuggyfill.init({
            hacks: window.viewportUnitsBuggyfillHacks
        });
    }
</script>

只要使用到了viewport的单位（vw、vh、vmin或vmax ）地方，需要在样式中添加content

但是content也会引起一定的副作用。比如img和伪元素::before(:before)或::after（:after）。在img中content会引起部分浏览器下，图片不会显示。这个时候需要全局添加：

1
2
3
img {
    content: normal !important;
}