在vue中使用flexible(手淘rem布局)

在做这个vue移动端项目之前,因为一定要用rem布局,网上查了很多资料。但貌似很麻烦。引入之前要配置这里,配置那里,写完代码还要转换px之类的。其实不用这么麻烦,只需下载好手淘rem布局插件之后,直接在vue项目中的main.js中全局引入。

// 手淘rem布局插件下载地址
https://github.com/amfe/lib-flexible

第一步:

image.png

第二步

在main.js中直接全局引入rem布局插件


image.png

第三步

直接在vue项目中编写代码,CSS样式中直接使用rem为单位。
使用pxCook软件,可以直接将PSD设计稿中的图转换为rem单位。(记得设置基数值)


image.png
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,840评论 1 92
  • 有关于移动端的适配布局一直以来都是众说纷纭,对应的解决方案也是有很多种。在《使用Flexible实现手淘H5页面的...
    BULL_DEBUG阅读 51,193评论 9 91
  • 一、 组件component 1. 什么是组件? 组件(Component)是 Vue.js 最强大的功能之一。组...
    饥人谷_Leonardo阅读 2,039评论 0 18
  • ## 框架和库的区别?> 框架(framework):一套完整的软件设计架构和**解决方案**。> > 库(lib...
    Rui_bdad阅读 3,018评论 1 4
  • 一:什么是闭包?闭包的用处? (1)闭包就是能够读取其他函数内部变量的函数。在本质上,闭包就 是将函数内部和函数外...
    xuguibin阅读 9,776评论 1 52