rem、vw可伸缩布局框架（fpx）

今天药忘吃喽~ 2023-03-06 05:49 19阅读 0赞

## 前言 ##

前面我们分析了webpack，最后还实战了一个vue的项目：

*  [webpack实战之（手把手教你从0开始搭建一个vue项目）][webpack_0_vue]
 *  [手把手教你从0开始搭建一个vue项目(完结）][0_vue]

强烈推荐大家去阅读一下前面的文章哈！

今天我们带来点干货，我们利用前面的知识撸一个h5移动端适配的框架，我们取名为["fpx-css-loader"][fpx-css-loader]。

说到h5移动端适配的，大家都会想到`rem`跟`vw`，我们去[caniuse][]看一下这两个方案的兼容性：

### rem ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Z2X2J1Zw_size_16_color_FFFFFF_t_70]

可以看到，绝大多数的浏览器是兼容的，平时项目用它完全是没毛病！

### vw ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Z2X2J1Zw_size_16_color_FFFFFF_t_70 1]

vm跟rem比就差多了，不过当下大部分手机是可以覆盖的。

## 思路 ##

*  我们利用caniuse的数据判断当前项目环境是否支持vw适配，如果支持就用vw适配，不支持就用rem适配
 *  webpack插件做rem适配兼容
 *  webpak loader做css中的单位转换("fpx"转“vw”、“rem”)

## 开始 ##

### caniuse ###

/**
     * 判断当前环境是否支持vw适配
     * @returns {boolean}
     */
    exports.supportVw = function () {
        
      //  支持浏览器环境
      const supportList = require('browserslist')(); //获取当前项目的浏览器列表
      // vw所支持的浏览器环境
      const vw = require('caniuse-lite/data/features/viewport-units');//vw在caniuse数据库中的位置
      const unpack = require('caniuse-lite').feature; //caniuse数据库数据解析工具
      // 默认支持
      let support = true;
      function browsersSort(a, b) {
        
        a = a.split(' ');
        b = b.split(' ');
        if (a[0] > b[0]) {
        
          return 1;
        }
        if (a[0] < b[0]) {
        
          return -1;
        }
        return Math.sign(parseFloat(a[1]) - parseFloat(b[1]));
      }
      // 转换caniuse的数据
      function f(data, opts, callback) {
        
        data = unpack(data);
        if (!callback) {
        
          [callback, opts] = [opts, {
        }];
        }
        const need = [];
        // eslint-disable-next-line guard-for-in,no-restricted-syntax
        for (const browser in data.stats) {
        
          const versions = data.stats[browser];
          // eslint-disable-next-line guard-for-in,no-restricted-syntax
          for (const version in versions) {
        
            const suppor = versions[version];
            //筛选出不支持的浏览器
            if (suppor === 'n') {
        
              need.push(`${
          browser} ${
          version}`);
            }
          }
        }
        callback(need.sort(browsersSort));
      }
      f(vw, (browsers) => {
        
        browsers.forEach((item) => {
        
          //如果当前项目浏览器列表中包含不支持vw的浏览器的时候
          if (supportList.includes(item)) {
        
            support = false;
          }
        });
      });
    
      return support;
    };

### plugin ###

/**
     * fpx-css-loader webpack插件
     * 自动给入口文件注入flexible.js代码
     */
    const {
         supportVw } = require('./utils');
    
    class FpxWebpackPlugin {
        
      constructor(options) {
        
        this.options = options || {
        };
      }
    
      apply(compiler) {
        
        //如果设置了强制使用rem或者不支持vw并且不是强制使用vw的时候，自动注入amfe-flexible/index.min.js做rem适配
        if ((this.options.forceRem || !supportVw()) && !this.options.forceVw) {
        
          //获取webpack中配置的所有入口
          Object.keys(compiler.options.entry).forEach((key) => {
        
            if (!(compiler.options.entry[key] instanceof Array)) {
        
              compiler.options.entry[key] = [compiler.options.entry[key]];
            }
            //给每个入口加上一个“amfe-flexible/index.min.js”文件
            compiler.options.entry[key] = [`!!${
          require.resolve('amfe-flexible/index.min.js')}`, ...compiler.options.entry[key]];
          });
        }
      }
    }
    
    FpxWebpackPlugin.NAME = 'FpxWebpackPlugin';
    module.exports = FpxWebpackPlugin;

### loader ###

### parse ###

/**
     * web端fpx单位适配
     */
    const postcss = require('postcss');
    const px2rem = require('postcss-plugin-px2rem');
    const fvw = require('../postcss/fvw');
    const {
         supportVw } = require('../utils');
    module.exports = function (source, options) {
        
      //如果设置了强制使用rem或者不支持vw并且不是强制使用vw的时候,利用postcss的px2rem插件做rem单位转换
      if ((options.forceRem || !supportVw()) && options.forceVw) {
         
        return postcss([px2rem({
        
          ...options,
          rootValue: {
        
            fpx: options.rootValue.fpx / 10,
          },
        })]).process(source).css;
      }
      //当为vw适配方案的时候，使用自定义postcss插件进行vm单位转换
      return postcss([fvw(options)]).process(source).css;
    };

### fvw ###

## 使用 ##

我们利用vue-cli创建一个简单的vue项目叫fpx-demo：

➜  vue create fpx-demo

### 安装 ###

➜ npm install  fpx-webpack-loader -D

### 配置 ###

#### 参数(默认参数) ####

{
         //默认配置
      rootValue: {
        
        fpx: 750, //ui基准
      },
      forceRem: false, //是否强制使用rem
      forceVw: false, //是否青汁使用vw
      platform: 'web', //平台选择
      unitPrecision: 5, //计算过后的值保留的小数位
    };

#### vue-cli项目 ####

vue.config.js:

module.exports = {
        
        chainWebpack: config => {
        
            ["css"].forEach((r) => {
        
                config.module.rule(r).oneOf('vue').use("fpx-loader").before("postcss-loader").loader(require.resolve("fpx-webpack-loader")).options({
         //默认配置
      rootValue: {
        
        fpx: 750, //ui基准
      },
      forceRem: false, //是否强制使用rem
      forceVw: false, //是否青汁使用vw
      platform: 'web', //平台选择
      unitPrecision: 5, //计算过后的值保留的小数位
    });
                config.module.rule(r).oneOf('normal').use("fpx-loader").before("postcss-loader").loader(require.resolve(" fpx-webpack-loader")).options({
         //默认配置
      rootValue: {
        
        fpx: 750, //ui基准
      },
      forceRem: false, //是否强制使用rem
      forceVw: false, //是否青汁使用vw
      platform: 'web', //平台选择
      unitPrecision: 5, //计算过后的值保留的小数位
    });;
                config.plugin("fpx-plugin").use(require("fpx-webpack-loader").FoxCssPlugin, [{
        }]);
            });
        }
    };

#### 普通项目webpack配置 ####

module.exports = {
        
      ...
        module: {
        
            rules: [
                {
        
                    test: /\.(sass|scss)$/,
                    use: [
                        "style-loader",
                        "css-loader",
                        {
        
                            loader: "postcss-loader",
                            options: {
        
                                config: {
        
                                    path: path.resolve(__dirname, "./postcss.config.js")
                                }
                            }
                        },
                        "fpx-webpack-loader", //配置loader,不传就使用默认参数
                        "sass-loader"
                    ],
                }
            ]
          ...
        },
        plugins: [
            new (require("fpx-webpack-loader").FoxCssPlugin)(), //配置plugin
        ]
      ...
    };

大概是这样，大家具体按照自己项目配置。

### css ###

<template>
      <div id="app">
        <div class="fpx-375">fpx-375</div>
        <div class="fpx-750">fpx-750</div>
      </div>
    </template>
    
    <script>
    import HelloWorld from './components/HelloWorld.vue'
    
    export default {
      name: 'app',
      components: {
        HelloWorld
      }
    }
    </script>
    
    <style>
      html, body {
        margin: 0;
        padding: 0;
      }
    
      #app {
        font-size: 24fpx;//使用fpx
        color: white;
      }
    
      .fpx-375 {
        width: 375fpx;//使用fpx
        height: 100fpx;//使用fpx
        background: red;
      }
    
      .fpx-750 {
        width: 750fpx; //使用fpx
        height: 100fpx;//使用fpx
        background: green;
      }
    </style>

## 效果 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Z2X2J1Zw_size_16_color_FFFFFF_t_70 2]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Z2X2J1Zw_size_16_color_FFFFFF_t_70 3]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Z2X2J1Zw_size_16_color_FFFFFF_t_70 4]

项目已上传github：[https://github.com/913453448/fpx-css-loader][fpx-css-loader], 欢迎star、欢迎fork！！

[webpack_0_vue]: https://vvbug.blog.csdn.net/article/details/107623590
[0_vue]: https://vvbug.blog.csdn.net/article/details/107637898
[fpx-css-loader]: https://github.com/913453448/fpx-css-loader
[caniuse]: https://www.caniuse.com/#search=rem
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Z2X2J1Zw_size_16_color_FFFFFF_t_70]: /images/20230208/4ddd1a5f7b29477ca4be423f4c3227bf.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Z2X2J1Zw_size_16_color_FFFFFF_t_70 1]: /images/20230208/9ab61237b99c44b9968f2fb9404aacdc.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Z2X2J1Zw_size_16_color_FFFFFF_t_70 2]: /images/20230208/729301de3d2440b6bb022c0f1b609d32.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Z2X2J1Zw_size_16_color_FFFFFF_t_70 3]: /images/20230208/23236d52814749d4a42fb2d978b329f9.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Z2X2J1Zw_size_16_color_FFFFFF_t_70 4]: /images/20230208/d921804cc33a4ce59f4af4094db22690.png