如何让maxDisplayWidth只针对某个class或者某个页面，而不是一设置上来就是限制全局

[hzzou]

No description provided.

[wswmsword]

可以设置 include 选项，用正则过滤一下，设置之后只有匹配的页面会用 maxDisplayWidth 转换，其他页面不走插件。

[hzzou]

可以设置 include 选项，用正则过滤一下，设置之后只有匹配的页面会用 maxDisplayWidth 转换，其他页面不走插件。

不行，我设置过，include或者exclude选项不生效

"postcss-mobile-forever":{
            viewportWidth: 1920,
            maxDisplayWidth: 1920,
            include: [/views\/airdrop/]
        },

一设置就是全局

[wswmsword]

你的系统是 Windows 吗，Windows 路径分隔符号和 Mac 不同。

[hzzou]

你的系统是 Windows 吗，Windows 路径分隔符号和 Mac 不同。

我是在mac上开发

[wswmsword]

方便的话给我个最简包，我本地调试一下。按理 include 是能生效的，我这两天刚写了个例子就是只生效 include 内的文件，https://github.com/wswmsword/postcss-mobile-forever/tree/main/example/cases/include-only。

[hzzou]

方便的话给我个最简包，我本地调试一下。按理 include 是能生效的，我这两天刚写了个例子就是只生效 include 内的文件，https://github.com/wswmsword/postcss-mobile-forever/tree/main/example/cases/include-only。

你的这个参数再增加 maxDisplayWidth：750
plugins: [
["postcss-mobile-forever", {
viewportWidth: 750,
maxDisplayWidth：750，
enableMediaQuery: true,
appSelector: "#root",
demoMode: true,
include: [/pages\//],
side: {
selector1: ".footer",
}
}],
],

然后在google浏览器responsive模式下拉伸

[wswmsword]

我试了一下，配置是这样的：

module.exports = {
  plugins: [
    ["postcss-mobile-forever", {
      viewportWidth: 750,
      maxDisplayWidth: 750,
      // enableMediaQuery: true,
      appSelector: "#root",
      // demoMode: true,
      include: [/pages[\\/](mobile|watch)/],
      side: {
        selector1: ".footer",
      }
    }],
  ],
};

按照上面的配置，这个 demo 里，/desktop 文件夹下的页面不会被转换，下面我截了张图，看起来是生效的：

[hzzou]

我试了一下，配置是这样的：

module.exports = {
  plugins: [
    ["postcss-mobile-forever", {
      viewportWidth: 750,
      maxDisplayWidth: 750,
      // enableMediaQuery: true,
      appSelector: "#root",
      // demoMode: true,
      include: [/pages[\\/](mobile|watch)/],
      side: {
        selector1: ".footer",
      }
    }],
  ],
};

按照上面的配置，这个 demo 里，/desktop 文件夹下的页面不会被转换，下面我截了张图，看起来是生效的：

项目我下载下来看了和试了，你说了半天，你是在多入口页面的情况下嘛，分别是有多个html页面和入口。我说的是在vue和react单页面，单入口，只有一个html入口文件的情况

[wswmsword]

你提供一个简包，打包成 zip，复制粘贴到这个评论框，我下载下来本地调试一下。

[hzzou]

vue-online_1.zip
记得看项目里面的readme说明

[wswmsword]

我知道你意思了，这个主要是因为 appSelector 所在的那个 CSS 文件不在 exclude 里，所以 appSelector 是要被插件转换的，你的其他页面的子文件夹组件都挂载在 appSelector 下面，实际上 exclude 的页面确实排除转换了，它们里的单位都还是原来的 px，只是最外层包了个居中的 appSelector。
可以这样设置，appSelector: "#center-app"，然后给需要居中的页面组件最外层加上这个 center-app 的 id，最顶层的 app id 就不用了。
归档.zip

[hzzou]

这样确实可以，我试过了，还需要在样式表里面写点这个选择器的样式才会生效，就算你弄个空占位也不行

[wswmsword]

空占位估计是被哪个产包优化的插件给删掉了，到 mobile-forever 的时候就检测不到了