Vue实现rem自适应布局，无需安装插件，代码简单

作者：coderYYY
个人简介：前端程序媛，目前主攻web前端，后端辅助，其他技术知识也会偶尔分享欢迎和我一起交流！（评论和私信一般会回！！）
个人专栏推荐：《前端项目教程以及代码》

Vue实现rem自适应布局，无需安装插件，跟随窗口变化，使用场景一般为echarts数据可视化大屏

✨一、前言

• rem自适应布局其实就是以html的字体大小作为相对单位，比如html的字体大小为16px，那么1rem=16px
• 之前用过rem的npm插件，但是效果都不尽人意，且html的字体只能写死
• 本文是通过在Vue中监听window的resize事件，动态设置html的font-size，以达到自适应效果

二、具体实现

代码比较简单，直接送上：

 data() {
    return {
      whei: 0,// 窗口宽度
    };
  },

  mounted() {
  
    this.whei = window.innerWidth;
    this.setHtmlFontSize();
	// 监听窗口变化 
    window.addEventListener("resize", this.setHtmlFontSize);
  },

  methods: {
    /* 动态设置html字体大小 */
    setHtmlFontSize() {
      this.whei = window.innerWidth;
      document.querySelector("html").style.fontSize = this.whei / 20 + "px";
    },
  }

css中可以直接使用rem作为单位了：

.pie{
    width: 3.5rem;
    height: 3.5rem;
}

这样就能在Vue中完美实现rem自适应，且布局不会乱，个人最常用于Vue+echarts数据可视化大屏中，后续专栏也会更新模板，感兴趣的可以订阅

【专栏】Vue+Echarts数据可视化大屏通用模板