–[New]Vue项目使用vw实现移动端适配教程

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

268223-106.jpg

2018年1月25日 11:58:01 最新的大漠老师移动端适配方案, 使用这套方案可以取代flexible.js 首先建议读者先去学习大漠老师的这篇文章,看完能有大大的收获

如何在Vue项目中使用vw实现移动端适配

####正文开始 使用vue-cli新建项目

安装依赖

• 复制以下代码：
• 复制进行 postcssrc.js 配置 .postcssrc.js配置

###各插件的功能：

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

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

postcss-px-to-viewport文档

postcss-write-svg 实现Retina屏1像素边框 首先记得在heade头加入

######实例不成功，换插件实现吧 方式一:

img { content: normal !important; } ```

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