最近在工作项目使用中新接触到postcss-px-to-viewport,在使用上遇到一个坑,也有段时间没更新啦,记录分享一下~希望对你有所帮助!
直接上重点,节省在网站苦苦寻找有效答案的你 >>>
我所遇到的坑:
由于项目需要,需要适配不同分辨率的终端设备,比如我接到的项目需求是1920*1080以及1200*1920;如果使用过postcss-px-to-viewport的话,我们知道适配一种尺寸在配置时设置viewportWidth就可以,那如果适配两种呢?
一开始我想到的是我们常用的@media screen and (max-width: 1200px)去做兼容,但真正使用后会发现这样字体大小是不能够适配的,那有什么办法能同时适配两种分辨率的终端呢,当终端尺寸差距比较大的情况?
然后我们去查配置postcss-px-to-viewport的api,非常幸运且惊喜的是api里提供了第二种真对适配landscapeWidth,于是我们这样配置,
const pxtoviewport = require("postcss-px-to-viewport");
module.exports = {
css: {
loaderOptions: {
//配置路vw vm适配
postcss: {
plugins: [
pxtoviewport({
viewportWidth: 1200,
mediaQuery: true,
landscape: true,
landscapeWidth: