vant ui 為例配置rem + viewport的移動端項目

• 2020 年 4 月 29 日
• 筆記

Rem 適配

Vant 中的樣式默認使用px作為單位，如果需要使用rem單位，推薦使用以下兩個工具：

• postcss-pxtorem 是一款 postcss 插件，用於將單位轉化為 rem
• lib-flexible 用於設置 rem 基準值

PostCSS 配置

下面提供了一份基本的 postcss 配置，可以在此配置的基礎上根據項目需求進行修改

module.exports = {
  plugins: {
    autoprefixer: {
      browsers: ['Android >= 4.0', 'iOS >= 8'],
    },
    'postcss-pxtorem': {
      rootValue: 37.5, //結果為：設計稿元素尺寸/37.5，比如元素寬375px,最終頁面會換算成 10rem

propList: ['*'], }, }, };

vue3.0中使用postcss-pxtorem – 簡書

直接新建或者在已有的postcss.config.js中加入配置

VUE中使用lib-flexible_Mr.Yuan-CSDN部落格

直接在main.js 中引用