前言:
1.先来跟大家科普一个单位:vw(视宽),即当前窗口的可视宽度
2.然后再来科普另一个单位rem,这个单位是相对于html的font-size,假如说html的font-size是16px,那么1rem = 16px
大家继续看:
举个例子:我们平时手机所说的分辨率是640*1136、750 * 1334其实说的是手机的设备分辨率,但是上面所说的视宽是逻辑像素,怎么计算呢,其实很简单,设备分辨率/2就是设备的逻辑像素
- 看完以上的概念,我们来进入话题:
我们有个设备分辨率为750 * 1334,逻辑像素就是375 * 667
100vw = 375px
再继续
1vw = 3.75px
继续
1vw / X(vw) = 3.75px / 100px
问题:为什么要计算100px等价多少vw呢?问得好,方便计算,你如果另类也可以计算其他px等价多少vw
等到的X等于26.666vw 即 100px等价于26.666vw
这时候我们把html的font-size设置为26.666vw是否就可以了呢?
假设一下我们的使用场景:
我拿到了一个设计稿,在ps测量完发现宽度是750px,然后我们又在ps中量了某个元素宽度是100px,那么我们在写这个元素宽度的时候width: 多少rem呢?
很显然这里我们在ps中测量的元素宽度100px是设备分辨率的宽度,逻辑像素其实只有50px,所以我们需要写width: (100 / 2 / 100 )rem
经过这里的计算大家应该也明白了,与其我们每次计算中自己转换一次像素,不如在设置html的font-size时候就转换一次,即将html的font-size设置为(26.666/ 2)vw,这样假如我们在750宽度的设计稿中测量到的元素宽度或者高度就可以直接 除以100来获取到对应的rem了,比如:ps中打开设计稿中某一元素宽度为80px,转换为rem即为0.8rem
- 最后注意这是别忘了在你的html中设置 vw、vh是基于视口的布局方案,故这个meta元素的视口必须声明。(解决宽高自动适配)
<meta name="viewport" content="width=device-width,initial-scale=1.0">
以上是介绍vw的适配原理,下面我们再来看一种在我的项目用到插件,不用自己去写以上的计算,但是上面的原理我建议大家好好看看,毕竟他可以很直观的帮你理解适配原理
插件postcss-flexbugs-fixes,帮助我们自动将px转换为vw的工具
- 首先需要在你的工程中下载依赖
npm install postcss-pxtorem --save-dev
- 首先需要在你的工程中下载依赖
在config文件夹下,打开 webpack.config.js 文件
找到 getStyleLoaders 中options -> plugins的添加配置代码如下
const getStyleLoaders = (cssOptions, preProcessor) => {
const loaders = [
isEnvDevelopment && require.resolve('style-loader'),
isEnvProduction && {
loader: MiniCssExtractPlugin.loader,
// css is located in `static/css`, use '../../' to locate index.html folder
// in production `paths.publicUrlOrPath` can be a relative path
options: paths.publicUrlOrPath.startsWith('.')
? { publicPath: '../../' }
: {},
},
{
loader: require.resolve('css-loader'),
options: cssOptions,
},
{
// Options for PostCSS as we reference these options twice
// Adds vendor prefixing based on your specified browser support in
// package.json
loader: require.resolve('postcss-loader'),
options: {
// Necessary for external CSS imports to work
// https://github.com/facebook/create-react-app/issues/2677
ident: 'postcss',
plugins: () => [ // 我们写插件的位置
require('postcss-flexbugs-fixes'),
require('postcss-preset-env')({
autoprefixer: {
flexbox: 'no-2009',
},
stage: 3,
}),
// 我们在此处添加如下代码
require('postcss-px-to-viewport')({
unitToConvert: 'px',
viewportWidth: 750, // 此处我项目的设计稿宽度为750px,按照你的修改即可
viewportHeight: 1334,
unitPrecision: 5,
propList: [
'*'
],
viewportUnit: 'vw',
fontViewportUnit: 'vw',
selectorBlackList: [],
minPixelValue: 1,
mediaQuery: false,
replace: true,
exclude: [/(\/|\\)(node_modules)(\/|\\)/]
// exclude: [/main/, /invoice/]
}),
// 我们在此处添加如上代码 end
// Adds PostCSS Normalize as the reset css with default options,
// so that it honors browserslist config in package.json
// which in turn let's users customize the target behavior as per their needs.
postcssNormalize(),
],
sourceMap: isEnvProduction && shouldUseSourceMap,
},
},
].filter(Boolean);
if (preProcessor) {
loaders.push(
{
loader: require.resolve('resolve-url-loader'),
options: {
sourceMap: isEnvProduction && shouldUseSourceMap,
},
},
{
loader: require.resolve(preProcessor),
options: {
sourceMap: true,
},
}
);
}
return loaders;
};
设置完以后重启项目,然后再设计稿中量到的是多少px就直接在css中写多少px即可,会自动给你转换为vw,记得别忘了设置html的meta标签
这个转换有个坑,不支持行内样式
看完如果对你有帮助给个赞吧,支持一下作者 二嘎,谢谢!