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 学习笔记 防止发生命名冲突
Jul 30 Javascript
JQuery 小练习(实例代码)
Aug 07 Javascript
javascript学习笔记(十二) RegExp类型介绍
Jun 20 Javascript
Jquery图形报表插件 jqplot简介及参数详解
Oct 10 Javascript
jquery实现动态菜单的实例代码
Nov 28 Javascript
JS使用正则表达式除去字符串中重复字符的方法
Nov 05 Javascript
Javascript面试经典套路reduce函数查重
Mar 23 Javascript
AngularJS+Bootstrap3多级导航菜单的实现代码
Aug 16 Javascript
详解JS转换数值函数Number()、parseInt()、parseFloat()
Aug 24 Javascript
JS实现音乐钢琴特效
Jan 06 Javascript
JS时间戳与日期格式互相转换的简单方法示例
Jan 30 Javascript
jQuery实现简单轮播图效果
Dec 27 jQuery
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实现首页链接查询 友情链接检查的代码
2010/01/05 PHP
php数据库连接时容易出错的特殊符号问题
2010/09/01 PHP
解析php下载远程图片函数 可伪造来路
2013/06/25 PHP
PHP实现UTF-8文件BOM自动检测与移除实例
2014/11/05 PHP
PHP实现懒加载的方法
2015/03/07 PHP
简单解决新浪SAE无法上传文件的问题
2015/05/13 PHP
php表单处理操作
2017/11/16 PHP
正则表达式判断是否存在中文和全角字符和判断包含中文字符串长度
2008/09/27 Javascript
jQuery选择头像并实时显示的代码
2010/06/27 Javascript
js实现select下拉框菜单
2015/12/08 Javascript
CSS+jQuery实现简单的折叠菜单
2016/12/20 Javascript
探究react-native 源码的图片缓存问题
2017/08/24 Javascript
jquery在vue脚手架中的使用方式示例
2017/08/29 jQuery
解析vue data不可以使用箭头函数问题
2018/07/03 Javascript
js的各种数据类型判断的介绍
2019/01/19 Javascript
[01:29]2014DOTA2展望TI 剑指西雅图DK战队专访
2014/06/30 DOTA
python3 爬取图片的实例代码
2018/11/06 Python
python实现RabbitMQ的消息队列的示例代码
2018/11/08 Python
使用Python中的reduce()函数求积的实例
2019/06/28 Python
python 判断linux进程,并杀死进程的实现方法
2019/07/01 Python
Atom Python 配置Python3 解释器的方法
2019/08/28 Python
python json load json 数据后出现乱序的解决方案
2020/02/27 Python
如何实现更换Jupyter Notebook内核Python版本
2020/05/18 Python
详解Pymongo常用查询方法总结
2021/01/29 Python
深入解析HTML5使用SVG图像时的viewBox属性用法
2015/09/02 HTML / CSS
StringBuilder和String的区别
2015/05/18 面试题
失业者真诚求职信范文
2013/12/25 职场文书
不假外出检讨书
2014/01/27 职场文书
公司年会搞笑主持词
2014/03/24 职场文书
开发房地产协议书
2014/09/14 职场文书
清明节寄语2015
2015/03/23 职场文书
学习型家庭事迹材料(2016精选版)
2016/02/29 职场文书
导游词之晋城蟒河
2019/12/12 职场文书
HTML怎么设置下划线?html文字加下划线方法
2021/12/06 HTML / CSS
nginx实现多geoserver服务的负载均衡
2022/05/15 Servers
python如何利用cv2.rectangle()绘制矩形框
2022/12/24 Python