基于vue-cli配置lib-flexible + rem实现移动端自适应

基于Vue-CLI配置Lib-Flexible + Rem实现移动端自适应 Vue-CLI是 Vue.js 的标准开发工具，提供了许多功能强大且灵活的配置选项。 Lib-Flexible是一个非常流行的移动端自适应解决方案，通过使用Rem单位来实现响应式设计。下面将详细介绍如何基于Vue-CLI配置Lib-Flexible + Rem实现移动端自适应。 一、安装Lib-Flexible 需要在项目中安装Lib-Flexible。使用以下命令安装Lib-Flexible： `npm install lib-flexible --save` 安装完成后，需要在项目入口文件main.js中添加以下代码，以引入Lib-Flexible： `import 'lib-flexible'` 二、配置px2rem-loader px2rem-loader是一个非常实用的工具，可以将px单位自动转换为rem单位。使用以下命令安装px2rem-loader： `npm install px2rem-loader --save-dev` 安装完成后，需要在Vue-CLI生成的文件中找到build/utils.js文件，并添加以下配置： ```javascript module.exports = { // ... module: { rules: [ { test: /\.css$/, use: [ 'style-loader', { loader: 'css-loader', options: { importLoaders: true } }, { loader: 'px2rem-loader', options: { remUnit: 75, remPrecision: 8 } } ] } ] } } ``` 三、使用px2rem-loader px2rem-loader可以将px单位自动转换为rem单位。在编写CSS样式时，可以直接使用px单位，px2rem-loader将其自动转换为rem单位。 例如： ```css .selector { width: 150px; height: 64px; font-size: 28px; border: 1px solid #ddd; } ``` 编译后将被转换为： ```css .selector { width: 2rem; height: 64px; font-size: 28px; border: 1px solid #ddd; } [data-dpr="1"] .selector { height: 32px; font-size: 14px; } [data-dpr="2"] .selector { height: 64px; font-size: 28px; } [data-dpr="3"] .selector { height: 96px; font-size: 42px; } ``` 四、注意事项 * 不能在index.html的头部加name为viewport的meta标签，Lib-Flexible会自动为我们添加。 * 对于外部引入的CSS文件，px2rem-loader可能不能正常转换，这是因为px2rem-loader只能转换内部引入的CSS文件。 五、结论 基于Vue-CLI配置Lib-Flexible + Rem可以实现移动端自适应，提供了一个灵活的响应式设计解决方案。通过使用px2rem-loader，可以将px单位自动转换为rem单位，实现响应式设计。