推荐看看大漠老师的文章,非常的有收获
如何在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适配移动端的更多相关文章

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

    https://www.w3cplus.com/mobile/vw-layout-in-vue.html 有关于移动端的适配布局一直以来都是众说纷纭,对应的解决方案也是有很多种.在<使用Flex ...

  2. 在Vue项目中使用vw实现移动端适配

    有关于移动端的适配布局一直以来都是众说纷纭,对应的解决方案也是有很多种.在<使用Flexible实现手淘H5页面的终端适配>提出了Flexible的布局方案,随着viewport单位越来越 ...

  3. 如何在Vue项目中使用vw实现移动端适配(转)

    有关于移动端的适配布局一直以来都是众说纷纭,对应的解决方案也是有很多种.在<使用Flexible实现手淘H5页面的终端适配>提出了Flexible的布局方案,随着viewport单位越来越 ...

  4. Vue项目中使用vw实现移动端适配

    我们在vue移动端项目中的适配一般都采用rem,但是rem也不是能兼容所有的终端. 随着viewport单位越来越受到众多浏览器的支持,下面将简单介绍怎么实现vw的兼容问题,用vw代替rem 当我们采 ...

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

    有关于移动端的适配布局一直以来都是众说纷纭,对应的解决方案也是有很多种.在< 使用Flexible实现手淘H5页面的终端适配>提出了Flexible的布局方案,随着 viewport 单位 ...

  6. vue中实时监听移动端屏幕高度(采坑后实践)

    最近做微信公众号活动,需要首页往input中输入内容,点击input软键盘tabbar被顶起来,网上借鉴很多(踩了许多坑)最后自己实践出来. <--!将手机屏幕的默认高度和实时高度获取--> ...

  7. 【前端适配】vw单位移动端适配方案

    近些年移动端的强势崛起,导致移动端适配越来越重要,个人之前一直使用的是rem进行适配,但是发现并不是非常完美,给力的是大漠老师写了一篇<如何在Vue项目中使用vw实现移动端适配>,比较完美 ...

  8. vue项目中使用了vw适配方案,引入第三方ui框架mint-ui时,适配问题解决

    问题分析: 一般第三方ui框架用的都是不同的适配方式,如果我们使用了vw适配,那么在使用mint-ui框架时,就会发现px单位会被转换成vw,从而导致样式变小的问题,如图 解决方案 网上看到了很多种解 ...

  9. vue中的适配:px2rem

    这应该是vue项目在适配移动端时候,最简单的方法之一下面是基本步骤(使用cnpm)1.下载并引入lib-flexible cnpm install --save lib-flexible 在main. ...

随机推荐

  1. Dubbox分布式框架之入门

    Dubbox简介 Dubbox是一个分布式服务框架,其前身是阿里巴巴开源项目Dubbox,被国内电商及换联网项目中使用,后期阿里巴巴停止了该项目的维护,当当网便在Dubbo基础上进行优化,并继续维护, ...

  2. nginx location分析

  3. Java Web-----JSP与Servlet(一)

    JSP (java服务器页面) JSP全名为Java Server Pages,中文名叫java服务器页面,其根本是一个简化的Servlet设计,它[1]  是由Sun Microsystems公司倡 ...

  4. HELLO JAVA!

    从今天开始,我将不定期地更新自己在大学学习到的JAVA知识,欢迎大家一同前来观摩学习,如有纰漏还请多多赐教2018-09-1715:39:14

  5. android之发送Get或Post请求至服务器接口

    import java.io.BufferedReader; import java.io.ByteArrayOutputStream; import java.io.IOException; imp ...

  6. python简说(十一)os模块

    import osres = os.listdir('/Users/nhy/Desktop') #列出某个目录下的所有文件# os.remove()# os.rename()# os.mkdir(r' ...

  7. 使SourceInsight支持Python语言的方法

    刚用家里的电脑看Python代码,发现py的文件在SI不显示,才意识到还没有安装Python.CLF插件.正好把这个方法在这分享一下,毕竟so easy~ 下载点这里–>Python.CLF h ...

  8. Python3 tkinter基础 LabelFrame StringVar 单击按钮,Label中显示的文字更换

             Python : 3.7.0          OS : Ubuntu 18.04.1 LTS         IDE : PyCharm 2018.2.4       Conda ...

  9. CodeForces 867B Save the problem

    B. Save the problem! http://codeforces.com/contest/867/problem/B time limit per test 2 seconds memor ...

  10. POJ-1038 Bugs Integrated, Inc. (状压+滚动数组+深搜 的动态规划)

    本题的题眼很明显,N (1 <= N <= 150), M (1 <= M <= 10),摆明了是想让你用状态压缩dp. 整个思路如下:由于要填2*3或者3*2的芯片,那么就要 ...