响应式rem适配方案

说起移动端适配，常常会想到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);
}