2024年vue-cli4+vant+rem+sass+vuex+axios封装，前端面试题2024中高级

最后

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

❤️ 谢谢支持，喜欢的话别忘了 关注、点赞哦。

Vant 中的样式默认使用px作为单位，如果需要使用rem单位，推荐使用以下两个工具:

• postcss-pxtorem 是一款 postcss 插件，用于将单位转化为 rem

• lib-flexible 用于设置 rem 基准值

安装并引入插件

1.安装依赖

cnpm install lib-flexible postcss-pxtorem@5.1.1 --save-dev

2. main.js 导入

// 移动端适配

import ‘lib-flexible/flexible’;

PostCSS 配置

1.创建.postcssrc.js

下面提供了一份基本的 postcss 配置，可以在此配置的基础上根据项目需求进行修改

// https://github.com/michael-ciniawsky/postcss-load-config

module.exports = {

plugins: {

autoprefixer: {

overrideBrowserslist: [‘Android 4.1’, ‘iOS 7.1’, ‘Chrome > 31’, ‘ff > 31’, ‘ie >= 8’]

},

‘postcss-pxtorem’: {

rootValue: 37.5,

propList: [‘*’]

}

}

}

更多详细信息： vant

新手必看，老鸟跳过

很多小伙伴会问我，适配的问题,因为我们使用的是 Vant UI，所以必须根据 Vant UI 375 的设计规范走，一般我们的设计会将 UI 图上

传到蓝湖，我们就可以需要的尺寸了。下面就大搞普及一下 rem。

我们知道 1rem 等于html 根元素设定的 font-size 的 px 值。Vant UI 设置 rootValue: 37.5,你可以看到在 iPhone 6 下

看到 （1rem 等于 37.5px）：

切换不同的机型，根元素可能会有不同的font-size。当你写 css px 样式时，会被程序换算成 rem 达到适配。

因为我们用了 Vant 的组件，需要按照 rootValue: 37.5 来写样式。

举个例子：设计给了你一张 750px * 1334px 图片，在 iPhone6 上铺满屏幕,其他机型适配。

• 当rootValue: 75 , 样式 width: 750px;height: 1334px; 图片会撑满 iPhone6 屏幕，这个时候切换其他机型，图片也会跟着撑

满。

• 当rootValue: 37.5 的时候，样式 width: 375px;height: 667px; 图片会撑满 iPhone6 屏幕。

也就是 iphone 6 下 375px 宽度写 CSS。其他的你就可以根据你设计图，去写对应的样式就可以了。

当然，想要撑满屏幕你可以使用 100%，这里只是举例说明。

▲ 回顶部

✅ vm 适配方案

本项目使用的是 rem 的 适配方案，其实无论你使用哪种方案，都不需要你去计算 12px 是多少 rem 或者 vw, 会有专门的工具去帮你做

。如果你想用 vw，你可以按照下面的方式切换。

1.安装依赖

npm install postcss-px-to-viewport -D

2.修改 .postcssrc.js

将根目录下 .postcssrc.js 文件修改如下

// https://github.com/michael-ciniawsky/postcss-load-config

module.exports = {

plugins: {

autoprefixer: {

overrideBrowserslist: [‘Android 4.1’, ‘iOS 7.1’, ‘Chrome > 31’, ‘ff > 31’, ‘ie >= 8’]

},

‘postcss-px-to-viewport’: {

viewportWidth: 375, // 视窗的宽度，对应的是我们设计稿的宽度，一般是750

unitPrecision: 3, // 指定px转换为视窗单位值的小数位数（很多时候无法整除）

viewportUnit: ‘vw’, // 指定需要转换成的视窗单位，建议使用vw

selectorBlackList: [‘.ignore’, ‘.hairlines’], // 指定不转换为视窗单位的类，可以自定义，可以无限添加,建议定义一至两个通用的类名

minPixelValue: 1, // 小于或等于1px不转换为视窗单位，你也可以设置为你想要的值

mediaQuery: false // 允许在媒体查询中转换px

}

}

}

3.删除原来的 rem 相关代码

src/main.js 删除如下代码

// 移动端适配