%20(2).svg)
项目简介
本项目是名为"fpx-css-loader"的基于webpack的CSS加载器。主要用于解决H5移动端适配问题，通过自动转换CSS中的单位，支持rem和vw适配方案，能根据当前浏览器环境自动选择最佳适配方案，保证页面在不同设备上有良好显示效果。
项目的主要特性和功能
- 自动适配方案选择：依据浏览器环境自动选
rem或vw，优先使用vw，不支持则回退到rem。 - webpack插件支持：借助webpack插件自动注入
flexible.js代码，保障rem适配方案正常运行。 - CSS单位转换：可将CSS中的
fpx单位自动转换为vw或rem，简化开发流程。 - 灵活的配置选项：支持通过配置项自定义UI基准、单位精度、强制使用
rem或vw等参数。
安装使用步骤
安装
在项目中通过npm安装fpx-webpack-loader：
bash
npm install fpx-webpack-loader -D
使用
1. vue-cli项目
在vue.config.js文件中配置fpx-webpack-loader和插件：
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, [{}]);
});
}
};
2. 普通webpack项目
在webpack配置文件中添加相应的规则和插件：
js
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)(), // 配置插件
]
};
CSS中使用fpx单位
在CSS中可直接使用fpx单位，fpx-webpack-loader会自动将其转换为vw或rem：
```css
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; } ```
下载地址
点击下载 【提取码: 4003】【解压密码: www.makuang.net】