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

vue-cli 移动端自适应之vw

猜你喜欢