vue中使用rem布局代码详解


Posted in Javascript onOctober 30, 2019

1、npm i amfe-flexible

2、import ‘amfe-flexible‘

然后再,安装postcss-px2rem插件

npm i postcss-px2rem

在package.json中配置

"postcss": {
  "plugins": {
   "autoprefixer": {},
   "postcss-px2rem": {
    "remUnit": 26.7
   }
  }
 }

在vue项目中使用rem布局简易教程

rem布局由于其根据屏幕宽度的改变修改相应的rem与px的转换比例,这样非常适合移动端的项目。

在不同的分辨率下,都会有较好的显示效果。

在使用rem布局的时候需要引入flexible.js。

js会根据屏幕的宽度计算html的根字体大小

在vue项目中只需要安装raziel-flex模块引用就行

安装方法 

 

npm install raziel-flex

引用方法(在main.js中引用)

import flex from 'raziel-flex'
 
flex(600); //传入值为页面变化最大宽(px)

引用时会需要传入一个参数,布局变化的最大宽,当大于这个值时模块便不再修改html根字体的大小。

模块修改的根字体的大小等于屏幕宽度除以10;

vacode编辑器安装remcss插件使用时更方便。

以上就是本次介绍的全部知识点,感谢大家的学习和对三水点靠木的支持。

Javascript 相关文章推荐
js对象基础实例分析
Jan 13 Javascript
jquery单选框radio绑定click事件实现方法
Jan 14 Javascript
浅谈javascript中的闭包
May 13 Javascript
浅谈Javascript中Object与Function对象
Sep 26 Javascript
javascript基本算法汇总
Mar 09 Javascript
vue loadmore 组件滑动加载更多源码解析
Jul 19 Javascript
Angular将填入表单的数据渲染到表格的方法
Sep 22 Javascript
浅谈vue引入css,less遇到的坑和解决方法
Jan 20 Javascript
又拍云 Node.js 实现文件上传、删除功能
Oct 28 Javascript
JS中通过url动态获取图片大小的方法小结(两种方法)
Oct 31 Javascript
微信小程序控制台提示warning:Now you can provide attr "wx:key" for a "wx:for" to improve performance解决方法
Feb 21 Javascript
vue项目使用$router.go(-1)返回时刷新原来的界面操作
Jul 26 Javascript
vue进入页面时不在顶部,检测滚动返回顶部按钮问题及解决方法
Oct 30 #Javascript
Vue中图片Src使用变量的方法
Oct 30 #Javascript
解决VUE双向绑定失效的问题
Oct 29 #Javascript
vue-form表单验证是否为空值的实例详解
Oct 29 #Javascript
vue获取form表单的值示例
Oct 29 #Javascript
Vue 实现把表单form数据 转化成json格式的数据
Oct 29 #Javascript
使用axios请求时,发送formData请求的示例
Oct 29 #Javascript
You might like
十天学会php(1)
2006/10/09 PHP
纯真IP数据库的应用 IP地址转化成十进制
2009/06/14 PHP
php简单socket服务器客户端代码实例
2015/05/18 PHP
浅析Yii2 GridView实现下拉搜索教程
2016/04/22 PHP
Javascript的构造函数和constructor属性
2010/01/09 Javascript
浅析jQuery1.8的几个小变化
2013/12/10 Javascript
nodejs教程之入门
2014/11/21 NodeJs
JavaScript的面向对象编程基础
2015/08/13 Javascript
AngularJS入门教程之多视图切换用法示例
2016/11/02 Javascript
JavaScript实现鼠标点击导航栏变色特效
2017/02/08 Javascript
jQuery简单绑定单个事件的方法示例
2017/06/10 jQuery
微信小程序的分类页面制作
2017/06/27 Javascript
vue-router2.0 组件之间传参及获取动态参数的方法
2017/11/10 Javascript
Vue完整项目构建(进阶篇)
2018/02/10 Javascript
JSON的parse()方法介绍
2019/01/31 Javascript
详解微信小程序用定时器实现倒计时效果
2019/04/30 Javascript
vue Treeselect 树形下拉框:获取选中节点的ids和lables操作
2020/08/15 Javascript
Python中字符串对齐方法介绍
2015/05/21 Python
Python全局变量用法实例分析
2016/07/19 Python
浅谈python对象数据的读写权限
2016/09/12 Python
Python实现桶排序与快速排序算法结合应用示例
2017/11/22 Python
对numpy中数组转置的求解以及向量内积计算方法
2018/10/31 Python
django中使用Celery 布式任务队列过程详解
2019/07/29 Python
pytorch 自定义数据集加载方法
2019/08/18 Python
Python中的sys.stdout.write实现打印刷新功能
2020/02/21 Python
python实现udp传输图片功能
2020/03/20 Python
Python爬虫爬取微博热搜保存为 Markdown 文件的源码
2021/02/22 Python
法国珠宝店:CLEOR
2017/01/29 全球购物
Gtech官方网站:地毯清洁器、吸尘器及园艺设备
2018/05/23 全球购物
成龙洗发水广告词
2014/03/14 职场文书
教研处工作方案
2014/05/26 职场文书
党支部班子“四风”问题自我剖析材料
2014/09/28 职场文书
邀请函格式范文
2015/02/02 职场文书
2015年教师自我评价范文
2015/03/04 职场文书
2015年妇女工作总结
2015/05/14 职场文书
《颐和园》教学反思
2016/02/19 职场文书