前端rem的应用

发表于 | 分类于 | 阅读次数：
本文字数： 2.6k | 阅读时长 ≈ 2 分钟
前端页面的适配方案，rem的应用。

前端页面的适配经常采用的方案是利用rem，将设计稿中的尺寸在不同尺寸的屏幕上对应地放大缩小。以下是相关配置的代码，其中设计稿的宽度是1920px，其他情况可以对应做出改变。实际使用时，只需要将设计稿的尺寸除以100，再以rem代替原本的px单位。比如”width: 200px;” 采用以下设置后，需要用”width: 2rem;”替代。

App.vue文件：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<template>
  <div id="app">
    <div id="nav">
      <!-- <router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link> -->
    </div>
    <router-view />
  </div>
</template>

<script>
export default {
  name: "app",
  // 注意vue的生命周期，开始转换是发生在何时。
  created() {
    this.setHtmlFontSize();
  },
  methods: {
    setHtmlFontSize() {
      // 设计稿宽度为1920px时
      var whdef = 100 / 1920;
      var ww = window.innerWidth;
      var rem = ww * whdef;

      let root = document.documentElement;
      
      // `${str}`是es6的新语法, 例：const name = 'A';const age = 18;console.info(`大家好，我叫${name}，今年${age}岁了`);
      root.style.fontSize = `${rem}px`;

      // reload if resize
      window.onresize = function() {
        window.location.reload();
      };
    }
  }
};
</script>

<style lang="less">
@import url("../src/assets/less/reset.less");
</style>

到此已经完成，可以直接将px值除以100得到对应的rem。因为rem的值是固定的，也可以提取出来放在js文件夹下的global.js中，在App.vue中直接引用，在此简单记录一下全局变量的使用。

global.js对应的部分：

1
2
3
4
5
const rem = window.innerWidth*(100/1920);

export default {
  rem
};

注意还要在main.js中加入以下代码

1
2
import global_msg from '@/assets/js/global.js'   
Vue.prototype.$global_msg = global_msg;

这样在其他的文件中可以通过this.$global_msg.rem来引入。

App.vue

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<template>
  <div id="app">
    <div id="nav">
      <!-- <router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link> -->
    </div>
    <router-view />
  </div>
</template>

<script>
export default {
  name: "app",
  created() {
    this.setHtmlFontSize();
  },
  methods: {
    setHtmlFontSize() {
      let root = document.documentElement;
      root.style.fontSize = `${this.$global_msg.rem}px`;

      // reload if resize
      window.onresize = function() {
        window.location.reload();
      };
    }
  }
};
</script>

<style lang="less">
@import url("../src/assets/less/reset.less");
</style>