欢迎来到[自学php网] ①群 287460651

主页 > 前端 > vue教程 >

vue 中使用rem布局

来源:未知    时间:2020-07-10 14:52 作者:小飞侠 阅读:

[导读] 在使用vue-cli搭建好项目框架后,在目录结构的index.html文件中添加一段js代码: fnResize();window.onresize=function(){fnResize();}functionfnResize(){vardeviceWidth=document.documentElement.clientWidth||window.innerWidth;...

在使用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-flexible2、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。


最新文章

点击排行

自学PHP网专注网站建设学习,PHP程序学习,平面设计学习,以及操作系统学习

京ICP备14009008号-1@版权所有www.zixuephp.com

网站声明:本站所有视频,教程都由网友上传,站长收集和分享给大家学习使用,如由牵扯版权问题请联系站长邮箱904561283@qq.com