utils - setFontSize - 设置字体大小

intro

原理

使用 postcss-plugin-px2rem 将 px 转为rem，在根节点设置font-size

notice

rem 是基于html，不是body

style

postcss-plugin-px2rem 未转换 style 内 px

style rem无法转换解决方案 手动写为rem

utils

// /utils/setFontSize.js
class SetFontSize {
  constructor(options = {}) {
    Object.assign(
      this,
      {
        defaultType: 'small',
        types: {
          default: '',
          large: 18,
          medium: 16,
          small: 14,
          mini: 12,
        },
      },
      options
    );
  }
  init(options) {
    if (!this.options) return;
    Object.assign(this, options);
    this.set();
  }
  set(type = this.defaultType) {
    if (!this.types[type]) {
      console.warn(`${type} fontSize not exist!!!`);
    }
    document.documentElement.style.fontSize = this.types[type] + 'px';
  }
}

export default new SetFontSize();

使用

初始化

// /main.js
import setFontSize from '@/utils/setFontSize'

setFontSize.set(Cookies.get('size') || 'medium')

change.vue

redirect.vue

store

// @/store/modules/config.js
import setFontSize from '@/utils/setFontSize'
const state = {
    size: Cookies.get('size') || 'medium',
}

const mutations = {
    SET_SIZE: (state, size) => {
        state.size = size
        Cookies.set('size', size)
    }
}

const actions = {
    setSize({ commit }, size) {
        setFontSize.set(size)
        commit('SET_SIZE', size)
    }
}

export default {
    namespaced: true,
    state,
    mutations,
    actions
}