推荐看看大漠老师的文章,非常的有收获
如何在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. sql 思路

    先 django 定好sql框架 再 sqlalchemy 根据框架写...

  2. [WCF REST] 一个简单的REST服务实例

    Get:http://www.cnblogs.com/artech/archive/2012/02/04/wcf-rest-sample.html [01] 一个简单的REST服务实例 [02] We ...

  3. JavaScript中冒泡与事件委托

    冒泡 事件触发后事件流的三个阶段按顺序依次是: 1.捕获阶段 2.目标阶段 3.冒泡阶段 大盒子包裹小盒子,两个盒子都分别添加点击事件,当点击小盒子,两个盒子的事件都会触发. 事件委托 下级元素委托上 ...

  4. Codeforces Round #427 (Div. 2) Problem B The number on the board (Codeforces 835B) - 贪心

    Some natural number was written on the board. Its sum of digits was not less than k. But you were di ...

  5. tcp客户端封装

    1.头文件 #ifndef TCPCLIENT_H #define TCPCLIENT_H #include <QTcpSocket> class TcpClient : public Q ...

  6. Spring <import>标签配置

    使用情景:在Maven项目中,我们在Spring 配置文件中需要用到<import resource="">标签来引入其他配置文件,这里我要记下一些注意事项 情景1 & ...

  7. ICM Technex 2018 and Codeforces Round #463 (Div. 1 + Div. 2, combined) A

    2018-02-19 A. Palindromic Supersequence time limit per test 2 seconds memory limit per test 256 mega ...

  8. HDU 4391 Paint The Wall(分块的区间维护)

    题意:给出几个操作,把l-r赋值为z,询问l-r有几个z,其中z < INT_MAX 思路:因为z很大,所以很难直接用线段树去维护.这里可以使用分块来解决.我们可以让每个块用map去储存map[ ...

  9. 【第四十章】Spring Boot 自定义拦截器

    1.首先编写拦截器代码 package com.sarnath.interceptor; import javax.servlet.http.HttpServletRequest; import ja ...

  10. Asp.Net 之 OnClientClick 与 OnClick 的执行顺序

    Asp.net 中 OnClientClick 与 OnClick 的执行顺序为:客户端的OnClientClick先执行,服务器端的OnClick后执行. 拓展:在执行完客户端的OnClientCl ...