vue-cli 移动端自适应之vw

##vue中使用vw来适配移动端

# .postcssrc.js 文件

module.exports = {
　　"plugins": {
　　　　"postcss-import": {},
　　　　"postcss-url": {},
　　　　// to edit target browser: use ...
　　　　"autoprefixer": {}
　　}
}　

# 安装PostCSS插件

默认状况下已经有了 postcss-import postcss-url autoprefixer
postcss-import主要功能是解决@import引入路径问题，使用这个插件可让你快速定位到指定的文件

postcss-url主要用来处理文件，好比图片文件、字体文件等引用路径的处理。
在Vue项目中，vue-loader已具备相似的功能，只须要配置中将vue-loader配置进去。

autoprefixer插件是用来自动处理浏览器前缀的一个插件。若是你配置了postcss-cssnext，其中就已具有了autoprefixer的功能。在配置的时候，未显示的配置相关参数的话，表示使用的是Browserslist指定的列表参数，你也能够像这样来指定last 2 versions 或者 > 5%

其余插件
postcss-aspect-ratio-mini
postcss-px-to-viewport
postcss-write-svg
postcss-cssnext
cssnano
postcss-viewport-units

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

安装完你能够在package.json文件中

"dependencies": {
　　"cssnano": "^3.10.0",
　　"postcss-aspect-ratio-mini": "^0.0.2",
　　"postcss-cssnext": "^3.1.0",
　　"postcss-px-to-viewport": "^0.0.3",
　　"postcss-viewport-units": "^0.1.4",
　　"postcss-write-svg": "^3.0.1",
}

# 接下来在.postcssrc.js文件进行配置

module.exports = {
　　"plugins": {
　　　　"postcss-import": {},
　　　　"postcss-url": {},
　　　　"postcss-aspect-ratio-mini": {},
　　　　"postcss-write-svg": {
　　　　　　utf8: false
　　　　},
　　　　"postcss-cssnext": {},
　　　　"postcss-px-to-viewport": {
　　　　　　viewportWidth: 750, // 视窗的宽度，通常为750px. 
　　　　　　viewportHeight: 1334, // 视窗的高度. 
　　　　　　unitPrecision: 3, // 指定`px`转换为视窗单位值的小数位数（不少时候没法整除）. 
　　　　　　viewportUnit: 'vw', // 指定须要转换成的视窗单位，建议使用vw. 
　　　　　　selectorBlackList: ['.ignore', '.hairlines'], // 指定不转换的类名，能够自定义，能够无限添加. 
　　　　　　minPixelValue: 1, // 小于或等于'1px'的转换. 
　　　　　　mediaQuery: false // 容许在媒体查询中转换'px'. 
　　　　},
　　　　"postcss-viewport-units": false,
　　　　"cssnano": {
　　　　　　preset: "advanced",
　　　　　　autoprefixer: false,
　　　　　　"postcss-zindex": false
　　　　}
　　}
}

 

# 因为cssnext和cssnano都具备autoprefixer，只须要一个就能够了，全部把默认的auotprefixer删除掉，让后再把cssnano中的autofixer设置为false。
从新跑一下 npm run dev

#postcss-cssnext 其实就是cssnext

#在cssnano的配置中使用preset: "advanced",须要另外安装
npm i cssnano-preset-advanced --save-dev

#若是你想禁用那个插件就把对应的属性设置为false

#postcss-px-to-viewport
将px转换成vw、vh、vmin或者vmax的视窗单位

"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` 
}

#目前大多数视觉设计稿都是使用的750px宽度，那么100vw=750px，即1vw=7.5px
例如

.test {
    width: 15px;
    height: 30px; 
}

编译出来就是

.test {
    width: 2vw;
    height: 4vw;
}

#若是你不想把px转换成vw的时候在 html元素添加指定的类名 .ignore或.hairlines(.hairlines通常用于设置.5px的border)
例如 <div class="test ignore"></div>

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