vue中的适配px2rem示例代码
更新时间：2018年11月19日 16:30:25 作者：monkeykg
这篇文章主要给大家介绍了关于vue中适配px2rem的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
前言
做移动端时，适配 是必须的。使用rem单位，可在不同屏幕上完美显示相同的布局。px2rem 插件方便的将px单位转为了rem。
px2rem 地址：https://www.npmjs.com/package/px2rem
这应该是vue项目在适配移动端时候，最简单的方法之一
下面是基本步骤（使用cnpm）
1.下载并引入lib-flexible
cnpm install --save lib-flexible
在main.js中 ：import 'lib-flexible/flexible'
2.引入px2rem-loader
cnpm install --save px2rem-loader
3.将px2rem-loader添加到cssLoaders
在build/util.js中
添加如下配置
代码如下
const px2remLoader = {
loader: 'px2rem-loader',
options: {
remUnit: 75//这个是重点，设计稿是750px
}
}
const loaders = [cssLoader,px2remLoader]
完了就可以直接用px做单位按照750的设计稿撸代码了，
总结
以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，如果有疑问大家可以留言交流，谢谢大家对脚本之家的支持。
相关文章
本篇文章主要介绍了vue axios 二次封装的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-12-12
这篇文章主要介绍了vant/vue跨域请求解决方案,需要的朋友可以参考下2022-12-12
这篇文章主要为大家介绍了vue 动态路由component 传递变量报错问题解决，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-05-05
这篇文章主要为大家详细介绍了Vue的props配置项，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助2022-02-02
这篇文章主要为大家详细介绍了vue或css动画实现列表向上无缝滚动，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-04-04
这篇文章主要介绍了Vue中数组和对象更改后视图不刷新的问题，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-09-09
最近在vue中安装Three.js,无聊顺便研究一些关于3D图形化库,下面这篇文章主要给大家介绍了关于vue+threejs写物体动画之物体缩放动画效果的相关资料,需要的朋友可以参考下2022-10-10
这篇文章主要给大家总结介绍了关于Vue Router的10条高级技巧，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2021-05-05
这篇文章主要介绍了vue中的config目录下index.js解读，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-03-03
这篇文章主要介绍了vue学习笔记之作用域插槽,结合实例形式分析了vue.js作用域插槽基本使用方法及操作注意事项,需要的朋友可以参考下2020-02-02
最新评论