vue 中使用rem布局
在使用vue-cli搭建好项目框架后,在目录结构的index.html文件中添加一段js代码:
fnResize();
window.onresize = function () {
fnResize();
}
function fnResize() {
var deviceWidth = document.documentElement.clientWidth || window.innerWidth;
if (deviceWidth >= 750) {
deviceWidth = 750;
}
if (deviceWidth <= 320) {
deviceWidth = 320;
}
document.documentElement.style.fontSize = (deviceWidth / 7.5) + 'px';
}
然后在写css就可以将px单位换成rem.
这里设置的比例是100px=1rem,
例如:宽度为100px时,可以直接写成1rem =============================================================
2==vue cli3.0 rem 使用
vue cli3.0 rem 使用
首先安装amfe-flexible插件,在main.js里引入
1、npm i amfe-flexible
2、import 'amfe-flexible'
然后再,安装postcss-px2rem插件
npm i postcss-px2rem
在package.json中配置
"postcss": {
"plugins": {
"autoprefixer": {},
"postcss-px2rem": {
"remUnit": 37.5
}
}
}
说明,我这里用的是vue-cli3.0脚手架。在.vue文件里。样式直接写px单位就可以了。在浏览器查看时会自动转换为rem单位。如果字体还想用px。那就这样将px大写。就不会编译为rem单位了。样式就可以实现px。
vue 中使用rem布局的更多相关文章
- 关于vue中使用rem问题
1.下载lib-flexible 我使用的是vue-cli+webpack,所以是通过npm来安装的 npm i lib-flexible --save 2.引入lib-flexible 在main. ...
- vue 实现 rem 布局的 或者 vw 布局的方法
vue 实现 rem 布局的 或者 vw 布局的方法 一.实现 rem 布局 移动端 <meta name="viewport" content="width=de ...
- & vue项目中的rem适配
有个朋友问我在vue项目怎么做rem适配,我工作中都是用的dva,但是我感觉道理都是一样的,换汤不换药.配完就顺手写下来吧! 需要安装两个插件库 lib-flexible和px2rem-loader ...
- rem布局在react中的应用
摘要: 前面给大家分享了一个react项目(http://www.cnblogs.com/xiyangbaixue/p/4751904.html),这次对这个项目做了一些改进,增加了rem布局和对is ...
- vue px 转rem
来自:https://www.cnblogs.com/wangqiao170/p/8652505.html 侵 删 每一个认真生活的人,都值得被认真对待 vue px转换为rem 前端开发中还原设 ...
- vue px转换为rem
前端开发中还原设计图的重要性毋庸置疑,目前来说应用最多的应该也还是使用rem.然而很多人依然还是处于刀耕火种的时代,要么自己去计算rem值,要么依靠编辑器安装插件转换. 而本文的目标就是通过一系列的配 ...
- 第130天:移动端-rem布局
一.关于布局方案 当拿到设计师给的UI设计图,前端的首要任务就是布局和样式,相信这对于大部分前端工程师来说已经不是什么难题了.移动端的布局相对PC较为简单,关键在于对不同设备的适配.之前介绍了一篇关于 ...
- 在rem布局下使用背景图片以及sprite
现在移动端页面用rem布局已经是一大流派了,成熟的框架如淘宝的flexiable.js,以及我的好友@墨尘写的更轻量级的hotcss.用rem作单位使得元素能够自适应后,还有一块需要关注的,那就是背景 ...
- 手机端页面自适应解决方案-rem布局
rem布局 布局前插入原生js即可 (function (doc, win) { var docEl = doc.documentElement, resizeEvt = 'orientationch ...
随机推荐
- openfoam变热物性参数的设置【转载】
转载自:http://blog.sina.com.cn/s/blog_9de422500102va73.html 物性参数在constant/thermophysicalProperties文件中设置 ...
- cgdb UTF-8乱码
support utf-8 cgdb github上的issues里面有人提到了这个问题,维护者回复的是需要使用libncursesw这个支持宽字符的库来解决这个问题. 查看是否安装了该库ldconf ...
- python何时用list,dict,set
从读取的角度来讲: 看是用来随机读取(查询)还是连续读取. list数组集中存放,连续读取效率高(具体还没测试,理论上应该如此). dict散列表,使用hash计算存放的位置,随机读取效率高. 随机读 ...
- 关于Kernel的思考
学习播客_KLDA(推导得很通俗,下面的推导就是源于此篇博客) 第一部分:按照自己的理解,模仿抄!学习播客来完成一下KLDA的推导. 第二部分:对于Kernel的思考 KLDA:顾名思义,就是把Ker ...
- AWS 配置IPv6
- 项目中一次排序规则的改动,注意到js中map的遍历的顺序
背景:项目需要对前端页面上某个插件的下拉选择项进行排序,需要按照配置的顺序显示. 首先调查后台,发现sql语句中已经添加order by.之后发现查询结果遍历后封装进HashMap,这里改为LinkH ...
- javaScript(拼写树形)+ajax请求,去后台查找数据
第一步:页面加载完成时,利用jquery中的一函数,调用js方法,js方法,发送ajax请求,去后台查找父类权限集合,响应回来json格式的数据,对数据进行操作,往页面上添加内容 //页面初始化加载菜 ...
- SQL-W3School-函数:SQL MAX() 函数
ylbtech-SQL-W3School-函数:SQL MAX() 函数 1.返回顶部 1. MAX() 函数 MAX 函数返回一列中的最大值.NULL 值不包括在计算中. SQL MAX() 语法 ...
- python数据可视化:pyecharts
发现了一个做数据可视化非常好的库:pyecharts.非常便捷好用,大力推荐!! 官方介绍:pyecharts 是一个用于生成 Echarts 图表的类库.Echarts 是百度开源的一个数据可视化 ...
- PAT 甲级 1038 Recover the Smallest Number (30 分)(思维题,贪心)
1038 Recover the Smallest Number (30 分) Given a collection of number segments, you are supposed to ...