博客
关于我
vue中使用vw适配移动端
阅读量:420 次
发布时间:2019-03-06

本文共 1039 字,大约阅读时间需要 3 分钟。

1.首先在项目中安装依赖
npm i postcss-aspect-ratio-mini postcss-px-to-viewport postcss-write-svg postcss-cssnext postcss-viewport-units cssnano --S
2.修改.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, // 容器宽度,也可以看作设计图的宽度 viewportHeight: 1334, // 容器高度,可以不配置 unitPrecision: 3, // px转换为vw后保留的小数位 viewportUnit: 'vw', // px需要转换成的单位,使用vw selectorBlackList: ['.ignore', '.hairlines'], // 不需要转换为其他单位的的class类 minPixelValue: 1, // 小于等于1px不转换 mediaQuery: false // 是否允许在媒体查询中使用px }, "postcss-viewport-units": {}, "cssnano": { preset: "advanced", autoprefixer: false, "postcss-zindex": false } }}

因为在cssnano中配置了 preset:"advanced",所以需要添加一个依赖

npm i cssnano-preset-advanced --save-dev
3.添加全局css

因为postcss-viewport-units会在计算vw时自动添加content内容,但是content会有一定的副作用,所以添加一个全局的css

img {    content: normal !important;}
4.解决vw兼容问题

在html中引用viewport-units-buggyfill插件

然后调用viewport-units-buggyfill

转载地址:http://ujluz.baihongyu.com/

你可能感兴趣的文章
使用async、await改善异步代码
查看>>
java 多态类型转换
查看>>
(C++11/14/17学习笔记):线程启动、结束,创建线程多法、join,detach
查看>>
HTML 和 CSS 简单实现注册页面
查看>>
趣谈win10常用快捷键
查看>>
IDEA出现问题:Received fatal alert: protocol_version 解决方案
查看>>
Airtest自动化测试 Docs airtest.core.android package
查看>>
11.2.6 时间值的小数秒
查看>>
Redis源码分析(七)--- zipmap压缩图
查看>>
【MySQL】(九)触发器
查看>>
Oracle 11G环境配置
查看>>
【Python】(十二)IO 文件处理
查看>>
【Oozie】(三)Oozie 使用实战教学,带你快速上手!
查看>>
师兄面试遇到这条 SQL 数据分析题,差点含泪而归!
查看>>
C语言的数值溢出问题(上)
查看>>
8051单片机(STC89C52)以定时器中断模式实现两倒计时器异步计时
查看>>
vue项目通过vue.config.js配置文件进行proxy反向代理跨域
查看>>
android:使用audiotrack 类播放wav文件
查看>>
聊聊我的五一小假期
查看>>
ACM/NCPC2016 C Card Hand Sorting(upc 3028)
查看>>