使用vw进行移动端的适配_[New]Vue项目使用vw实现移动端适配教程

2018年1月25日 11:58:01 最新的大漠老师移动端适配方案,

使用这套方案可以取代flexible.js

首先建议读者先去学习大漠老师的这篇文章,看完能有大大的收获

正文开始

使用vue-cli新建项目

vue init webpack vue-demo

cd vue-demo

npm run dev

安装依赖

复制以下代码：

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

复制进行 postcssrc.js 配置

.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,

unitPrecision: 3,

viewportUnit: 'vw',

selectorBlackList: ['.ignore', '.hairlines'],

minPixelValue: 1,

mediaQuery: false

},

"postcss-viewport-units": {},

"cssnano": {

preset: "advanced",

autoprefixer: false,

"postcss-zindex": false

}

}

}

各插件的功能：

postcss-px-to-viewport : 将项目中的px转化为vw

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

}

容器适配，可以使用vw

文本的适配，可以使用vw

大于1px的边框、圆角、阴影都可以使用vw

内距和外距，可以使用vw

postcss-write-svg 实现Retina屏1像素边框

首先记得在heade头加入

实例不成功，换插件实现吧

方式一:

方式二:

最重要的 降级处理

使用 Viewport Units Buggyfill 插件

在vue项目的index.html文件head标签添加引用

``

``

在Index.html文件body标签后添加以下代码

// vw兼容性处理viewport-units-buggyfill

window.onload = function () {

window.viewportUnitsBuggyfill.init({ hacks: window.viewportUnitsBuggyfillHacks });

//以下代码用户测试

// var winDPI = window.devicePixelRatio;

// var uAgent = window.navigator.userAgent;

// var screenHeight = window.screen.height;

// var screenWidth = window.screen.width;

// var winWidth = window.innerWidth;

// var winHeight = window.innerHeight;

// console.log("Windows DPI:" + winDPI + ";\ruAgent:" + uAgent + ";\rScreen Width:" +

// screenWidth + ";\rScreen Height:" + screenHeight + ";\rWindow Width:" + winWidth +

// ";\rWindow Height:" + winHeight)

}

最后做个对img兼容处理，在全局添加(在main.js 用 Import '@/common/index.css')

img {

content: normal !important;

}

这样就可以用vw进行移动端项目开发啦!