在使用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布局的更多相关文章

  1. 关于vue中使用rem问题

    1.下载lib-flexible 我使用的是vue-cli+webpack,所以是通过npm来安装的 npm i lib-flexible --save 2.引入lib-flexible 在main. ...

  2. vue 实现 rem 布局的 或者 vw 布局的方法

    vue 实现 rem 布局的 或者 vw 布局的方法 一.实现 rem 布局 移动端 <meta name="viewport" content="width=de ...

  3. & vue项目中的rem适配

    有个朋友问我在vue项目怎么做rem适配,我工作中都是用的dva,但是我感觉道理都是一样的,换汤不换药.配完就顺手写下来吧! 需要安装两个插件库 lib-flexible和px2rem-loader ...

  4. rem布局在react中的应用

    摘要: 前面给大家分享了一个react项目(http://www.cnblogs.com/xiyangbaixue/p/4751904.html),这次对这个项目做了一些改进,增加了rem布局和对is ...

  5. vue px 转rem

    来自:https://www.cnblogs.com/wangqiao170/p/8652505.html 侵 删   每一个认真生活的人,都值得被认真对待 vue px转换为rem 前端开发中还原设 ...

  6. vue px转换为rem

    前端开发中还原设计图的重要性毋庸置疑,目前来说应用最多的应该也还是使用rem.然而很多人依然还是处于刀耕火种的时代,要么自己去计算rem值,要么依靠编辑器安装插件转换. 而本文的目标就是通过一系列的配 ...

  7. 第130天:移动端-rem布局

    一.关于布局方案 当拿到设计师给的UI设计图,前端的首要任务就是布局和样式,相信这对于大部分前端工程师来说已经不是什么难题了.移动端的布局相对PC较为简单,关键在于对不同设备的适配.之前介绍了一篇关于 ...

  8. 在rem布局下使用背景图片以及sprite

    现在移动端页面用rem布局已经是一大流派了,成熟的框架如淘宝的flexiable.js,以及我的好友@墨尘写的更轻量级的hotcss.用rem作单位使得元素能够自适应后,还有一块需要关注的,那就是背景 ...

  9. 手机端页面自适应解决方案-rem布局

    rem布局 布局前插入原生js即可 (function (doc, win) { var docEl = doc.documentElement, resizeEvt = 'orientationch ...

随机推荐

  1. openfoam变热物性参数的设置【转载】

    转载自:http://blog.sina.com.cn/s/blog_9de422500102va73.html 物性参数在constant/thermophysicalProperties文件中设置 ...

  2. cgdb UTF-8乱码

    support utf-8 cgdb github上的issues里面有人提到了这个问题,维护者回复的是需要使用libncursesw这个支持宽字符的库来解决这个问题. 查看是否安装了该库ldconf ...

  3. python何时用list,dict,set

    从读取的角度来讲: 看是用来随机读取(查询)还是连续读取. list数组集中存放,连续读取效率高(具体还没测试,理论上应该如此). dict散列表,使用hash计算存放的位置,随机读取效率高. 随机读 ...

  4. 关于Kernel的思考

    学习播客_KLDA(推导得很通俗,下面的推导就是源于此篇博客) 第一部分:按照自己的理解,模仿抄!学习播客来完成一下KLDA的推导. 第二部分:对于Kernel的思考 KLDA:顾名思义,就是把Ker ...

  5. AWS 配置IPv6

  6. 项目中一次排序规则的改动,注意到js中map的遍历的顺序

    背景:项目需要对前端页面上某个插件的下拉选择项进行排序,需要按照配置的顺序显示. 首先调查后台,发现sql语句中已经添加order by.之后发现查询结果遍历后封装进HashMap,这里改为LinkH ...

  7. javaScript(拼写树形)+ajax请求,去后台查找数据

    第一步:页面加载完成时,利用jquery中的一函数,调用js方法,js方法,发送ajax请求,去后台查找父类权限集合,响应回来json格式的数据,对数据进行操作,往页面上添加内容 //页面初始化加载菜 ...

  8. SQL-W3School-函数:SQL MAX() 函数

    ylbtech-SQL-W3School-函数:SQL MAX() 函数 1.返回顶部 1. MAX() 函数 MAX 函数返回一列中的最大值.NULL 值不包括在计算中. SQL MAX() 语法 ...

  9. python数据可视化:pyecharts

    发现了一个做数据可视化非常好的库:pyecharts.非常便捷好用,大力推荐!! 官方介绍:pyecharts 是一个用于生成 Echarts 图表的类库.Echarts 是百度开源的一个数据可视化 ...

  10. PAT 甲级 1038 Recover the Smallest Number (30 分)(思维题,贪心)

    1038 Recover the Smallest Number (30 分)   Given a collection of number segments, you are supposed to ...