vue中使用vw适配移动端
推荐看看大漠老师的文章,非常的有收获
如何在Vue项目中使用vw实现移动端适配
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
插件
<script src="//g.alicdn.com/fdilab/lib3rd/viewport-units-buggyfill/0.6.2/??viewport-units-buggyfill.hacks.min.js,viewport-units-buggyfill.min.js"></script>
然后调用viewport-units-buggyfill
<script>
window.onload = function () {
window.viewportUnitsBuggyfill.init({ hacks: window.viewportUnitsBuggyfillHacks });
}
</script>
vue中使用vw适配移动端的更多相关文章
- 转:如何在Vue项目中使用vw实现移动端适配
https://www.w3cplus.com/mobile/vw-layout-in-vue.html 有关于移动端的适配布局一直以来都是众说纷纭,对应的解决方案也是有很多种.在<使用Flex ...
- 在Vue项目中使用vw实现移动端适配
有关于移动端的适配布局一直以来都是众说纷纭,对应的解决方案也是有很多种.在<使用Flexible实现手淘H5页面的终端适配>提出了Flexible的布局方案,随着viewport单位越来越 ...
- 如何在Vue项目中使用vw实现移动端适配(转)
有关于移动端的适配布局一直以来都是众说纷纭,对应的解决方案也是有很多种.在<使用Flexible实现手淘H5页面的终端适配>提出了Flexible的布局方案,随着viewport单位越来越 ...
- Vue项目中使用vw实现移动端适配
我们在vue移动端项目中的适配一般都采用rem,但是rem也不是能兼容所有的终端. 随着viewport单位越来越受到众多浏览器的支持,下面将简单介绍怎么实现vw的兼容问题,用vw代替rem 当我们采 ...
- 如何在Vue项目中使用vw实现移动端适配
有关于移动端的适配布局一直以来都是众说纷纭,对应的解决方案也是有很多种.在< 使用Flexible实现手淘H5页面的终端适配>提出了Flexible的布局方案,随着 viewport 单位 ...
- vue中实时监听移动端屏幕高度(采坑后实践)
最近做微信公众号活动,需要首页往input中输入内容,点击input软键盘tabbar被顶起来,网上借鉴很多(踩了许多坑)最后自己实践出来. <--!将手机屏幕的默认高度和实时高度获取--> ...
- 【前端适配】vw单位移动端适配方案
近些年移动端的强势崛起,导致移动端适配越来越重要,个人之前一直使用的是rem进行适配,但是发现并不是非常完美,给力的是大漠老师写了一篇<如何在Vue项目中使用vw实现移动端适配>,比较完美 ...
- vue项目中使用了vw适配方案,引入第三方ui框架mint-ui时,适配问题解决
问题分析: 一般第三方ui框架用的都是不同的适配方式,如果我们使用了vw适配,那么在使用mint-ui框架时,就会发现px单位会被转换成vw,从而导致样式变小的问题,如图 解决方案 网上看到了很多种解 ...
- vue中的适配:px2rem
这应该是vue项目在适配移动端时候,最简单的方法之一下面是基本步骤(使用cnpm)1.下载并引入lib-flexible cnpm install --save lib-flexible 在main. ...
随机推荐
- thinkphp 整合微信支付-简单粗暴
<?php//判断是否是微信客户端--该代码只适用于手机微信端--使用方法请看最后面注释if (isset($_SERVER['HTTP_USER_AGENT']) && str ...
- Linux学习笔记之yum安装和卸载软件
# yum -y install 包名(支持*) :自动选择y,全自动 # yum install 包名(支持*) :手动选择y or n # yum remove 包名(不支持*) # rpm -i ...
- JDK源码之HashSet
1.定义 HashSet继承AbstractSet类,实现Set,Cloneable,Serializable接口.Set 接口是一种不包括重复元素的 Collection,它维持它自己的内部排序,所 ...
- 标准库 string
1.func Fields(s string) []string,这个函数的作用是按照1:n个空格来分割字符串最后返回的是[]string的切片 package main import ( " ...
- 叶亚明:合格CTO的六要素(转)
叶亚明,携程旅行网CTO & 高级技术副总裁,负责携程的移动.Online.呼叫中心等的技术架构.开发及运营.在加入携程之前,叶亚明是ebay.com技术平台总监,领导ebay.com几代网站 ...
- uml类图和er图中主外键的表示区别
在er图也就是数据库中,无论是mysql/oracle都是从表引用主表的pk作为外键. 而在uml类图表示法中,他们的顺序则刚好相反,从主对象导向到子对象,如下: 主体是资金借款方,征信信息和资金借款 ...
- Android - Resource 之 Menu 小结
定义一个application的菜单,由MenuInflater召唤. 位置: res/menu/filename.xml 类型:指向Menu resource 文法: <?xml versio ...
- 2018-2019-1 20189206 《Linux内核原理与分析》第七周作业
linux内核分析学习笔记 --第六章 进程的描述和进程的创建 学习重点--子进程的创建以及运行流程 进程描述和进程的创建 操作系统的三大功能--进程管理.内存管理和文件系统. 在linux内核中利用 ...
- python使用pip下载模块
举例下载串口模块pyserial: 下载安装了python之后,打开cmd,在python的安装目录里,搜索pip,把pip3.7.exe拖进cmd,然后输入pip3.7.exe install py ...
- Linux内核中的wake_lock[【转】
本文转载自:https://blog.csdn.net/wuyb2011/article/details/78542233?locationNum=11&fps=1 #include < ...