vue中的适配px2rem示例代码


Posted in Javascript onNovember 19, 2018

前言

做移动端时,适配 是必须的。使用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中

添加如下配置

vue中的适配px2rem示例代码

vue中的适配px2rem示例代码

代码如下

const px2remLoader = {
loader: 'px2rem-loader',
options: {
remUnit: 75//这个是重点,设计稿是750px
}
}
const loaders = [cssLoader,px2remLoader]

完了就可以直接用px做单位按照750的设计稿撸代码了,

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
js 键盘记录实现(兼容FireFox和IE)
Feb 07 Javascript
jQuery实现checkbox全选的方法
Jun 10 Javascript
Jquery结合HTML5实现文件上传
Jun 25 Javascript
JS操作XML实例总结(加载与解析XML文件、字符串)
Dec 08 Javascript
jQuery 3.0中存在问题及解决办法
Jul 15 Javascript
CSS3 3D 技术手把手教你玩转
Sep 02 Javascript
微信小程序 绘图之饼图实现
Oct 24 Javascript
layer设置maxWidth及maxHeight解决方案
Jul 26 Javascript
js实现自动播放匀速轮播图
Feb 06 Javascript
vue渲染方式render和template的区别
Jun 05 Javascript
jQuery实现评论模块
Aug 19 jQuery
ant design vue中表格指定格式渲染方式
Oct 28 Javascript
JS监听事件的叠加和移除功能
Nov 19 #Javascript
微信小程序自定义弹窗wcPop插件
Nov 19 #Javascript
Vue.js 使用v-cloak后仍显示变量的解决方法
Nov 19 #Javascript
Vue.js 中的 v-cloak 指令及使用详解
Nov 19 #Javascript
浅析Vue.js 中的条件渲染指令
Nov 19 #Javascript
Vue.js 中的 v-show 指令及用法详解
Nov 19 #Javascript
深入浅析Vue.js 中的 v-for 列表渲染指令
Nov 19 #Javascript
You might like
mysql5详细安装教程
2007/01/15 PHP
php echo 输出字符串函数详解
2010/05/13 PHP
PHP 二维数组和三维数组的过滤
2016/03/16 PHP
php微信公众号开发之答题连闯三关
2018/10/20 PHP
再谈IE中Flash控件的自动激活 ObjectWrap
2007/03/09 Javascript
jcrop基本参数一览
2013/07/16 Javascript
javascript实现日期格式转换
2014/12/16 Javascript
jQuery事件绑定on()、bind()与delegate() 方法详解
2015/06/03 Javascript
实现placeholder效果的方案汇总
2015/06/11 Javascript
jQuery学习笔记之Ajax用法实例详解
2015/12/01 Javascript
js流动式效果显示当前系统时间
2016/05/16 Javascript
DOM 事件的深入浅出(二)
2016/12/05 Javascript
Angular企业级开发——MVC之控制器详解
2017/02/20 Javascript
Easyui Datagrid自定义按钮列(最后面的操作列)
2017/07/13 Javascript
Angular.js中angular-ui-router的简单实践
2017/07/18 Javascript
Scala解析Json字符串的实例详解
2017/10/11 Javascript
angularjs $http调用接口的方式详解
2018/08/13 Javascript
你可能不知道的CORS跨域资源共享
2019/03/13 Javascript
从理论角度讨论JavaScript闭包
2019/04/03 Javascript
jQuery实现的点击显示隐藏下拉菜单功能完整示例
2019/05/17 jQuery
操作按钮悬浮固定在微信小程序底部的实现代码
2019/08/02 Javascript
JavaScript使用百度ECharts插件绘制饼图操作示例
2019/11/26 Javascript
[46:38]完美世界DOTA2联赛PWL S2 Magma vs PXG 第三场 11.28
2020/12/02 DOTA
Python生成任意范围任意精度的随机数方法
2018/04/09 Python
windows系统中Python多版本与jupyter notebook使用虚拟环境的过程
2019/05/15 Python
pyqt5 键盘监听按下enter 就登陆的实例
2019/06/25 Python
Python过滤掉numpy.array中非nan数据实例
2020/06/08 Python
Python面向对象特殊属性及方法解析
2020/09/16 Python
俄罗斯最大的灯具网站:Fandeco
2020/03/14 全球购物
控制工程专业个人求职信
2013/09/25 职场文书
C++程序员求职信
2014/05/07 职场文书
观看焦裕禄观后感
2015/06/09 职场文书
爱国教育主题班会
2015/08/14 职场文书
Nginx + consul + upsync 完成动态负载均衡的方法详解
2021/03/31 Servers
Python集合的基础操作
2021/11/01 Python
Windows server 2012 R2 安装IIS服务器
2022/04/29 Servers