自适应布局方案

可以实现一套代码适应各种层次设备的解决方案，不管是向上兼容还是向下兼容都能实现一个不错的效果

起步

在自适应布局里面的常客主要是 rm rem vw 这三种主要单位

这次我们的主题是 rem 单位，rem 单位主要是根据html 的 font-size 的值来做一个适配所以需要使用rem单位，必须得搭配其他的工具或者单位一起

这里我们主要使用lib-flexible或者amfe-flexible这里的两个包的功能是类似的，主要是将设计图的尺寸按照一定的比例划分，例如 750px 的尺寸划分为十份就是 75px, 这里得到的 75px 就是1rem的大小，其实这里还涉及一个物理像素比，我们这里先默认它为1倍，就不影响前面的计算结果了。

前面两个包做的事情就类似这种，但是它会根据当前实时的画面大小动态的做这么一个计算，就会动态的改变html font-size 的值的一个大小，然后rem单位再根据这个大小的变化而变化，就能实现这样一个响应式的变化了

安装配置

// 使用 lib-flexible 或者使用 amfe-flexible 只使用其中一个就可以了
npm install npm install lib-flexible || 
 // 或者 npm install amfe-flexible

引入

import { createApp } from 'vue';
import App from './app.vue';
import './assets/index.css';
// import 'amfe-flexible';
import 'lib-flexible'; // 引入 lib-flexible 后就能生效
const app = createApp(App);
app.mount('#app');

图片中可以font-size 是已经被绑上了对应的值

其实到这一步如果是手动书写计算rem的值的话就已经完成了

但是一般设计师都是给的px单位的设计图，尺寸都是px单位的，如果尺寸都是由手动计算，那无疑增加了很多的工作量，而且还容易出现错误

所以为了我们开发的时候也是使用px单位，我们这里就要借助webpack来帮我们实现这个转换了

我们这里是使用 postcss 的一个插件 postcss-pxtorem 来实现这个转换

因为我们是在webpack中使用，所以可以使用 postcss-loader 来加载这个插件

      {
        test: /\.s[ac]ss$/i,
        use: [
          'style-loader',
          'css-loader',
          // 这里加载 postcss-loader
          {
            loader: 'postcss-loader',
            options: {
              postcssOptions: {
                plugins: [
                  'postcss-preset-env',
                  [
                    // 这是插件的格式，数组第一个是插件的名字，第二个是检查的参数
                    'postcss-pxtorem',
                    {
                      // 这里是默认值，就算不写，默认都会传
                      // 这里传了只是说明一下关键属性的意思
                      rootValue: 16,     // 这里就是传1rem代表多少px
                      unitPrecision: 5,  // 这是最多保存的位数
                      selectorBlackList: [],
                      // 这是需要转换的属性
                      propList: ['font', 'font-size', 'line-height', 'letter-spacing'],
                      replace: true,
                      mediaQuery: false,
                      minPixelValue: 0,
                      exclude: null,
                    },
                  ],
                ],
              },
            },
          },
          'sass-loader',
        ],
      },

postcss-pxtorem 生效后，你就能看到对应的属性已经被按照尺寸转换成rem单位了

转换前

转换后

这样就实现了 font-size 的变化，以及 px 到 rem 的一个单位的转换

页面布局自适应,pxrem 单位转换

自适应布局方案

起步

安装配置

引入