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

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

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进行移动端项目开发啦!


本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏吴裕超

JavaScript 函数节流和函数去抖应用场景辨析

函数节流和去抖的出现场景,一般都伴随着客户端 DOM 的事件监听。举个例子,实现一个原生的拖拽功能(不能用 H5 Drag&Drop API),需要一路监听 m...

3227
来自专栏前端人人

React技巧8(不再手动绑定this,跟.bind(this)说88)

本教程总共8篇,每日更新一篇,请关注我们!你可以进入历史消息查看以往文章,也敬请期待我们的新文章! 1.React 技巧1(状态组件与无状态组件的使用) --...

3355
来自专栏九彩拼盘的叨叨叨

耗时函数被短时间频繁调用时,防浏览器卡死的方法

耗时函数如果在短时间内被频繁调用,如果不做合适的处理,会导致浏览器卡死(无响应),严重影响用户体验。

843
来自专栏游戏杂谈

HTML5的Histroy API

比较典型的是GitHub,在点击代码文件夹和文件时,会发现它的url地址栏变换了、标题栏变化了、前进后退按钮也变化了(跟新开了一个新页面感觉一样),但体验起来很...

2003
来自专栏互联网杂技

Angular 1 vs. Angular 2 深度比较

AngularJS 2 尽管还在Alpha阶段,但主要功能和文档已经发布。让我我们了解下Angular 1 和 2 的区别,以及新的设计目标将如何实现。 Ang...

34410
来自专栏Coding迪斯尼

Reactjs+BootStrap开发自制编程语言Monkey的编译器:创建简易的页面IDE

1812
来自专栏搞前端的李蚊子

小程序第三方框架对比 ( wepy / mpvue / taro )

     众所周知如今市面上端的形态多种多样,手机Web、ReactNative、微信小程序, 支付宝小程序, 快应用等,每一端都是巨大的流量入口,当业务要求同...

8664
来自专栏Google Dart

AngularDart4.0 英雄之旅-教程-07路由 顶

如果该应用程序尚未运行,请启动该应用程序。 在进行更改时,请通过重新加载浏览器窗口来保持运行。

1853
来自专栏极乐技术社区

五个套路看懂微信小程序开发(上)

你或许听说过,快速入门就是要学最小必要知识。而我最近在看微信小程序的官方教程时发现,这个教程虽然简单,但对于微信小程序开发来说,80%的套路都能从这里学习到,你...

3009
来自专栏HTML5学堂

jQuery1.x与2.x版本区别及1.9版本的变化

HTML5学堂:还记得2012年做开发时,使用的是jQuery1.4版本的框架,一个项目做完时,jQuery版本已经提升到了1.6。不得不说jQuery更新速度...

4694

扫码关注云+社区

领取腾讯云代金券