説起移動端適配，常常會想到rem,在這裏寫三種rem適配方案：

一、postcss-px2rem

1.安裝PostCSS-px2rem插件
使用npm或yarn安裝postcss-plugin-px2rem插件。在終端中運行以下命令：

npm install --save-dev postcss-plugin-px2rem

或者

yarn add postcss-plugin-px2rem --dev

2.配置Webpack
如果您使用的是Webpack，您需要在webpack.config.js文件中進行一些配置。首先，確保您已經安裝了webpack和webpack-loader。然後，在文件末尾添加以下內容

const webpack = require('webpack');

然後，添加一個新的LoaderOptionsPlugin實例：

 plugins: [
 ...plugins,
 new webpack.LoaderOptionsPlugin({
 // 在webpack 2.0之後，此配置不能直接寫在自定義配置項中，必須寫在此處
 vue: {
 postcss: [require('postcss-px2rem')({
 remUnit: 75,
 propWhiteList: [], // 指定不需要轉換的屬性，默認為空數組
 rootValue: 16,
 minPixelValue: 0.25 // 設置最小像素值，小於該值的像素值將被忽略，默認為0.25
 })]
 }

3.配置PostCSS
在項目的根目錄下創建一個postcss.config.js文件（如果尚未創建），並在其中添加以下內容：

module.exports = {
 plugins: [
 require('autoprefixer'), // 自動添加瀏覽器前綴，確保兼容性支持...

通過以上步驟，您已經成功配置了PostCSS-px2rem插件。現在，當您編譯項目時，PostCSS-px2rem插件將自動將px單位轉換為rem單位。請注意，轉換後的樣式可能需要根據您的需求進行微調。

二、flexible.js

操作步驟：

1.安裝lib-flexible.js

npm install lib-flexible --save

2.在項目入口文件main.js 中引入lib-flexible

import 'lib-flexible/flexible'

3.在VScode中安裝cssrem插件

4.修改默認字體的大小
在設置中，搜索框裏面輸入 cssroot 會顯示用户和工作區，如果效果圖是750，那這裏就改成75，如果是375這裏就改成37.5，要讓rem單位換算正確；

5.然後就可以使用了

三、自定義配置

在rem.scss文件中定義：

/**
設計稿的寬：$design_width
設計稿的高：$design_height
需自己定義
**/
@function px2rem($px) {
  @return $px / ($design_width / 10) * 1rem;
}

@function rem2px($rem) {
  @return $rem * ($design_width / 10) * 1px;
}

@function px2vh($px) {
  @return $px / $design_height * 100vh;
}

@function px2vw($px) {
  @return $px / $design_width * 100vw;
}

使用：引入rem.scss

@import "./rem.scss";
.table {
    width:px2rem(300);
    height: px2rem(180);
    margin: 0 px2rem(16);
}