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文件 document.createElement
Oct 14 Javascript
JS获取scrollHeight问题想到的标准问题
May 27 Javascript
javascript:void(0)点击登录没反应怎么解决
Nov 13 Javascript
js面向对象的写法
Feb 19 Javascript
JS简单实现数组去重的方法示例
Mar 27 Javascript
JavaScript方法_动力节点Java学院整理
Jun 28 Javascript
JS对象序列化成json数据和json数据转化为JS对象的代码
Aug 23 Javascript
vue iview组件表格 render函数的使用方法详解
Mar 15 Javascript
JavaScript面向对象的程序设计(犯迷糊的小羊)
May 27 Javascript
JQuery+Bootstrap 自定义全屏Loading插件的示例demo
Jul 03 jQuery
在Vue中使用this.$store或者是$route一直报错的解决
Nov 08 Javascript
Vue项目vscode 安装eslint插件的方法(代码自动修复)
Apr 15 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
php中防止恶意刷新页面的代码小结
2012/10/31 PHP
初识Laravel
2014/10/30 PHP
谈谈你对Zend SAPIs(Zend SAPI Internals)的理解
2015/11/10 PHP
Extjs中常用表单介绍与应用
2010/06/07 Javascript
jQuery ajax cache缓存问题
2010/07/01 Javascript
jQuery实现转动随机数抽奖效果的方法
2015/05/21 Javascript
javaScript中with函数用法实例分析
2015/06/08 Javascript
js控制文本框输入的字符类型方法汇总
2015/06/19 Javascript
使用javascript插入样式
2016/03/14 Javascript
Bootstrap实现下拉菜单效果
2016/04/29 Javascript
浅谈js基本数据类型和typeof
2016/08/09 Javascript
js友好的时间返回函数
2016/08/24 Javascript
关于Function中的bind()示例详解
2016/12/02 Javascript
javascript实现多张图片左右无缝滚动效果
2017/03/22 Javascript
深入理解基于vue-cli的vuex配置
2017/07/24 Javascript
vue.js实现简单轮播图效果
2017/10/10 Javascript
webpack4 入门最简单的例子介绍
2018/09/05 Javascript
微信小程序本地存储实现每日签到、连续签到功能
2019/10/09 Javascript
详解Vue3 Composition API中的提取和重用逻辑
2020/04/29 Javascript
JavaScript实现五子棋小游戏
2020/10/26 Javascript
[03:28]2014DOTA2国际邀请赛 走近EG战队天才中单Arteezy
2014/07/12 DOTA
在Python中使用元类的教程
2015/04/28 Python
python使用matplotlib绘制折线图教程
2017/02/08 Python
python脚本生成caffe train_list.txt的方法
2018/04/27 Python
Python3处理HTTP请求的实例
2018/05/10 Python
Flask实现跨域请求的处理方法
2018/09/27 Python
pytorch 固定部分参数训练的方法
2019/08/17 Python
Python 下载及安装详细步骤
2019/11/04 Python
python加载自定义词典实例
2019/12/06 Python
matplotlib部件之矩形选区(RectangleSelector)的实现
2021/02/01 Python
在线购买廉价折扣书籍和小说:BookOutlet.com
2018/02/19 全球购物
安全演讲稿大全
2014/05/09 职场文书
党员四风问题对照检查材料思想汇报
2014/09/16 职场文书
党的群众路线教育实践活动个人对照检查材料(乡镇)
2014/11/05 职场文书
Java设计模式之代理模式
2022/04/22 Java/Android
pytest实现多进程与多线程运行超好用的插件
2022/07/15 Python