移动端竖屏不能转换vh单位,请作者大大 麻烦看看 是不是我没配置好

[candy11111]

module.exports = { plugins: { autoprefixer: {}, //给不同的浏览器添加前缀 "postcss-mobile-to-multi-displays": { "viewportWidth": 375, "desktopWidth": 375, "landscapeWidth": 425, "yAxisBreakPoint": null, "xAxisBreakPoint": 375, "rootClass": "root-class", "border": false, "disableDesktop": false, "disableLandscape": false, "enableMobile": true, "pass1px": true, "exclude": null, "include": null, "unitPrecision": 3, "mobileConfig": { "propList": ['*'], "viewportUnit": "vw", "fontViewportUnit": "vw", "selectorBlackList": ['van'], "replace": true } }, "postcss-px-to-viewport": { unitToConvert: 'px', //需要转换的单位 viewportWidth: '375', //视窗的宽度，对应设计稿的宽度 理想视口宽度为375 viewportHeight: '667',//视窗的高度，对应设计搞的高度 viewportUnit: 'vw',//转换的视窗单位 selectorBlackList: ['TabBarItem', '.pc-container','van'], // 指定不需要转换的类 minPixelValue: 1,//小于或者等于1px 不转换 mediaQuery: false,//是否允许媒体查询中转换px unitPrecision: 5,//转换后的精度，即小数点 // mediaQuery:true } } }

[wswmsword]

要转换成 vh 要把 viewportUnit 设置成 vh，下面是我帮你改的配置，去掉了 postcss-px-to-viewport，因为功能和 postcss-mobile-to-multi-displays 重复了，postcss-mobile-to-multi-displays 的版本要指定成最低 1.3.2 的版本：

module.exports = {
  plugins: {
    autoprefixer: {}, //给不同的浏览器添加前缀
    "postcss-mobile-to-multi-displays": {
      "viewportWidth": 375,
      "rootClass": "root-class",
      "enableMobile": true,
      "unitPrecision": 3,
      "mobileConfig": {
        "viewportUnit": "vh", // <--- 移动端竖屏能转换 vh
        "fontViewportUnit": "vw",
        "selectorBlackList": ['TabBarItem', '.pc-container', 'van'], // 指定不需要转换的类
        "replace": true
      }
    },
  }
}

如果还需要 postcss-px-to-viewport 的话，像下面这样配置试试，这样的话 postcss-px-to-viewport 是用来做视口单位转换，postcss-mobile-to-multi-displays 是用来添加桌面端和横屏的媒体查询：

module.exports = {
  plugins: {
    autoprefixer: {}, //给不同的浏览器添加前缀
    "postcss-mobile-to-multi-displays": {
      "viewportWidth": 375,
      "rootClass": "root-class",
      "unitPrecision": 3,
    },
    "postcss-px-to-viewport": {
      unitToConvert: 'px', // 需要转换的单位
      viewportWidth: '375', // 视窗的宽度，对应设计稿的宽度 理想视口宽度为375
      viewportHeight: '667', // 视窗的高度，对应设计搞的高度
      viewportUnit: 'vh',// <---- 移动端竖屏能转换 vh
      selectorBlackList: ['TabBarItem', '.pc-container', 'van'], // 指定不需要转换的类
      minPixelValue: 1, // 小于或者等于1px 不转换
      mediaQuery: false, // 是否允许媒体查询中转换px
      unitPrecision: 5, // 转换后的精度，即小数点
      // mediaQuery:true
    }
  }
}

默认状态下很多用不到的属性都不要写，不然这么多看起来太吓人了==

[candy11111]

更新了版本样式好像都乱了 之前我是用的postcss-mobile-to-multi-displays1.1.0的版本,我用postcss-px-to-viewport做了手机的适配,做完才和我说要在pc端 以手机的尺寸375展示出来

[wswmsword]

电脑上的 375px 相当窄，可以试下默认的 600px，就是 desktopWidth，也就是限制了 vw 的最大宽度是 600px。

第二个配置有效吗，第二个配置是用 postcss-px-to-viewport 做视口宽度单位转换的。如果有 position: fixed 的布局，元素可能会定位到视图区域外，方便的话可以发张图片。

我看到你有这三个类是忽略视口转换的，['TabBarItem', '.pc-container', 'van']，这个在 postcss-mobile-to-multi-displays 生成的媒体查询里不会生效，也可能导致错乱。

[candy11111]

可以了哦 谢谢作者大大,我这边再需要调一下pc端媒体查询

[wswmsword]

刚刚我升级了版本，2.0.0 的版本里也可以对媒体查询做 propList 和 selectorBlackList 处理了，对指定的选择器和属性也会在媒体查询中忽略。

还有就是这个版本的移动端视图默认会进行视口单位转换，用 disableMobile: true 就可以关闭，不是原来的 enableMobile 了。

postcss 也更新了依赖，依赖最低 postcss8.0.0 的版本。