vue中使用rem布局

王荣
• 阅读 1331

在使用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';
}

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。

点赞
收藏
评论区
推荐文章
菜鸟阿都 菜鸟阿都
3年前
vue项目无配置文件解决方案
问题在开发vue项目时,需要重新设置项目的启动端口,发现项目目录中并没有相关的配置文件【config目录】vue脚手架版本【通过vueversion查询】:@vue/cli4.5.13解决方案在vue项目根目录下创建vue.config.js配置文件vue.config.jsmodule.exportsdevServer:d
翼
4年前
vue-cli3 中使用rem布局
1.装包postcsspx2rem及px2remloadernpminstallpostcsspx2rempx2remloadersave2.在根目录src中新建utils目录下新建rem.js等比适配文件,内容如下//rem等比适配配置文件//基准大小constbaseSize16//设置rem
前端尾随者 前端尾随者
3年前
Vue项目添加ElementUI
1\.在上一篇,搭建环境,创建vue项目目录结构如下:编写工具,本人推荐:VisualStudioCode2\.进入到项目文件夹,执行加载elementui组件命令:npmielementuiS 3\.在main.js代码里添加对elementui的引用:importElementUIfrom'elementui'import'el
Easter79 Easter79
3年前
Vue CLI 2.x搭建vue,目录最全分析
一、vuecli介绍vuecli是一个用于快速搭建vue项目的脚手架。二、vuecli安装、更新安装过nodeJs、cnpm后,全局安装vuecli(以后其他项目可直接使用):cnpminstallgvuecli更新:cnpmupdate
Jacquelyn38 Jacquelyn38
4年前
2020年前端实用代码段,为你的工作保驾护航
有空的时候,自己总结了几个代码段,在开发中也经常使用,谢谢。1、使用解构获取json数据let jsonData  id: 1,status: "OK",data: 'a', 'b';let  id, status, data: number   jsonData;console.log(id, status, number )
Chase620 Chase620
4年前
vue cli3打包部署,浏览器缓存问题
问题:每次部署后,页面不更新总是有缓存问题。解决中心思想:在打包文件的文件名中添加一个版本号。方法:在vue.config.js中添加以下代码,vuecli3.x生成的项目默认没有这个文件,需要自己在根目录创建,和package.json同级。代码块const Timestamp  new Date().getTime();m
Chase620 Chase620
4年前
vue-cli3.0结合lib-flexible、px2rem实现移动端适配,完美解决第三方ui库样式变小问题
vuecli3.0结合libflexible、px2rem实现移动端适配,完美解决第三方ui库样式变小问题公司最近做的一个移动端项目从搭框架到前端开发由我独立完成,以前做移动端适配用的媒体查询,这次想用点别的适配方案,然后就采用了vuecli3.0结合libflexible、px2rem实现移动端适配的方案,开发过程中也遇到一些坑,自己选的方案自己
Wesley13 Wesley13
3年前
FLV文件格式
1.        FLV文件对齐方式FLV文件以大端对齐方式存放多字节整型。如存放数字无符号16位的数字300(0x012C),那么在FLV文件中存放的顺序是:|0x01|0x2C|。如果是无符号32位数字300(0x0000012C),那么在FLV文件中的存放顺序是:|0x00|0x00|0x00|0x01|0x2C。2.  
Stella981 Stella981
3年前
Node.js 中使用 ECDSA 签名遇到的坑
文/Fenying最近有个朋友问我关于Node.js下使用ECDSA的问题,主要是使用Node.js的Crypto模块无法校验网络传输过来的签名结果。在踩坑无数后,终于搞清楚了原因。坑0x00:签名输出格式在排除了证书、消息不一致的可能之后,我开始对比使用Node.js签名的结果与网络传输过来的签
Wesley13 Wesley13
3年前
MySQL部分从库上面因为大量的临时表tmp_table造成慢查询
背景描述Time:20190124T00:08:14.70572408:00User@Host:@Id:Schema:sentrymetaLast_errno:0Killed:0Query_time:0.315758Lock_
美凌格栋栋酱 美凌格栋栋酱
5个月前
Oracle 分组与拼接字符串同时使用
SELECTT.,ROWNUMIDFROM(SELECTT.EMPLID,T.NAME,T.BU,T.REALDEPART,T.FORMATDATE,SUM(T.S0)S0,MAX(UPDATETIME)CREATETIME,LISTAGG(TOCHAR(