wswmsword / postcss-mobile-forever

一款 PostCSS 插件,将固定尺寸的视图转为可跟随宽度变化而等比例伸缩的视图。To adapt different displays by one mobile viewport.
https://wswmsword.github.io/examples/mobile-forever/vanilla/
MIT License
325 stars 19 forks source link

appSelector配置失效 #46

Closed chenweilin0106 closed 3 months ago

chenweilin0106 commented 3 months ago

module.exports = { // plugins: [require("autoprefixer")], plugins: { // autoprefixer: {}, "postcss-preset-env": { stage: 0, browsers: "last 18 versions" }, // "postcss-px-to-viewport-8-plugin": { // viewportWidth: 750, // 设计稿的视口宽度 // exclude: [/node_modules/], // 忽略某些文件夹下的文件或特定文件 // unitPrecision: 5, // 单位转换后保留的精度 // propList: ["*"], // 能转化为vw的属性列表 // viewportUnit: "vw", // 希望使用的视口单位 // fontViewportUnit: "vw", // 字体使用的视口单位 // selectorBlackList: [], // 需要忽略的CSS选择器,不会转为视口单位,使用原有的px等单位。 // minPixelValue: 1, // 设置最小的转换数值,如果为1的话,只有大于1的值会被转换 // mediaQuery: true, // 媒体查询里的单位是否需要转换单位 // replace: true, // 是否直接更换属性值,而不添加备用属性 // landscape: false, // 是否添加根据 landscapeWidth 生成的媒体查询条件 @media (orientation: landscape) // }, "postcss-mobile-forever": { viewportWidth: 750, appSelector: "#app-containing-block", maxDisplayWidth: 480, }, }, };

postcss-mobile-forever版本:4.1.5 postcss版本:8.4.40

尝试过用元素选择器是可以的,比如我配置为body,就生效了;给body加上class或者id,配置上,依然无法生效;px已经转成vw了

wswmsword commented 3 months ago

你好,配置了 appSelector: "#abc" 之后,样式 css 文件里也要包含这个选择器,选择器的内容可以是空的:

#abc {
  min-height: 100vh;
}
chenweilin0106 commented 3 months ago

可以了,感谢