前言
在开发移动端项目的时候经常遇到不同设备及型号有不同的屏幕大小，如果直接设置px固定大小会出现各种设备兼容问题，那么有啥方法可以优化呢？
咱主要介绍两种，一种是配置rem，还有一种是配置vw。
一、css适配rem
1、安装依赖
需要安装 postcss cssnano postcss-normalize postcss-preset-env postcss-pxtorem，可执行一下命令一次安装
npm i postcss cssnano postcss-normalize postcss-preset-env postcss-pxtorem -D
2、新建配置文件
先在项目根目录新建文件
vite项目新建postcs.config.cjs文件webpack项目新建postcs.config.js文件
默认设计稿为 750px，具体配置如下
/**
* 我们默认设计稿为 750, vant-ui 按照 375 转化
* 如果这样实际使用时使用vant的变量在页面别的地方时需要 x2, 请注意, 如 src/App/app.less 中的设置
*/
const path = require('path');
module.exports = ((config = {
}) => {
let rootValue = 100;
const vantFile = path.join('node_modules', 'vant');
if ((config.file || '').indexOf(vantFile) > -1) {
// rootValue = 50;
} else {
// rootValue = 100;
}
return {
plugins: [require('cssnano')({
preset: 'default',
}), require('postcss-preset-env')({
// enable stable polyfills
stage: 4,
autoprefixer: {
/* autoprefixer options */
},
importFrom: [
/* import environment variable */
],
}), require('postcss-normalize')({
forceImport: 'senitize.css',
}), require('postcss-pxtorem')({
exclude: /(hairlines)/,
rootValue,
unitPrecision: 5,
propList: ['*'],
replace: true,
mediaQuery: false,
minPixelValue: 1,
})],
};
});
3、设置全局生效并使用
先在项目根入口执行以下代码，
const docEl = ref<HTMLElement>(document.documentElement);
const setRemUnit = function () {
const clientWidth = docEl.value.clientWidth > 768 ? 768 : docEl.value.clientWidth;
const rem = clientWidth / 7.68; // 由于基于768px配置，所以大小以 100 为单位，即 10px=0.1rem
docEl.value.style.fontSize = rem + 'px';
};
setRemUnit();
然后具体使用如下：
a {
font-size: 0.28rem;
}
具体效果如下图
- 大于等于768px的设备显示中可以看出在，1rem=100px
- 小于768px的设备显示中可以看出在，1rem=屏幕宽度 / 7.68 px（7.68可根据个人习惯配置对应数值）
二、css适配vw
1、安装依赖
适配vw需要安装 postcss-px-to-viewport 依赖
npm i postcss-px-to-viewport -D
2、新建配置文件
文件同rem配置，既在项目根目录新建文件
扫描二维码关注公众号，回复：
15672166 查看本文章
vite项目新建postcs.config.cjs文件webpack项目新建postcs.config.js文件
以375px为例，配置如下
module.export = {
plugins: {
"postcss-px-to-viewport": {
// 需要转换的单位
unitToConvert: "px",
// 设计稿的视口宽度
viewportWidth: 375,
// 单位转换后保留的精度
unitPrecision: 4,
}
}
}
3、使用
vw适配不需要额外配置，只需要 postcs.config 文件配置好即可生效
1vw = 屏幕宽度的1%
100vw = 屏幕宽度100%
总结
结合上面配置的来看，rem适配相对px可以较好控制字体大小等，而vw可以更好适配相对于宽度的大小，所以具体需要使用哪种适配，可根据实际需求配置即可。
喜欢此文可关注下哈，谢谢支持～