设置了之后移动端和pc端是不是都会限制最大宽度

[KunPengZheng]

设置如下： { "viewportWidth": file => file.includes("vant") ? 375 : 375, "appSelector": "#app", "maxDisplayWidth": 600 }

需求：想使用移动端的设计稿，兼容移动端和pc端的显示，我想到的问题就是在pc端会变得非常大，因为pc端是横屏，所以我找到了这个库，按照我的理解就是可以限制一个最大宽度，无论在pc端和移动端只要超过限制就不会发生转换。 问题：当我切换到pc的时候，显示变得异常大，我不知道是我对这个库的使用场景理解有误还是设置有问题？麻烦帮忙看看，需要提供什么额外信息请告知。

[wswmsword]

您理解的没问题，这个库的目标是让移动端界面兼容在 pc 端展示。我想看下你的 postcss 配置文件截图和 postcss-mobile-forever 的版本号，最好也有目前 pc 端展示的截图，另外在你上面的配置片段里 viewportWidth 这个属性设置可以直接设置成 "viewportWidth": 375。

[KunPengZheng]

前提：使用的是vant控件。 问题：

1. 目前在移动端也出现相同问题，是否和vant控件有关
2. 想再次确认一下，maxDisplayWidth只作用于pc端 还是 双端（移动和pc），单位是像素吗，vm转换后如果超过 maxDisplayWidth指定的值，是不转换还是转换成maxDisplayWidth指定的值

postcss 配置文件截图：

postcss-mobile-forever 的版本号：

代码截图：

pc 端展示的截图（vant列表控件，出现了问题）：

pc 端展示的截图（div控件，没有出现问题）：

[wswmsword]

和 vant 无关，maxDisplayWidth 是作用于任何端的，只是应该是你理解的效果和插件的功能有点区别，不太一样，我待会看看能不能给你解释一下。

[wswmsword]

插件的 maxDisplayWidth 的作用是让应用里的元素在大于一个宽度之后不再伸缩，而不是限制元素的最大值，比如设置 maxDisplayWidth: 1080 之后，页面会在屏幕宽度小于 1080 的时候等比例伸缩，而大于 1080 的时候，保持应用视图是 1080 宽度时的样式，不再继续等比例放大。

从你的截图可以看到 width: 1200px 转换成了 width: min(320vw, 3456px)，这是因为你设置的标准宽度是 375（"viewportWidth": file => file.includes("vant") ? 375 : 375），插件的理解是，当屏幕宽度为 375px 时，你的元素宽度是 1200px，转换一下，标准宽度即 100vw，那 1200px 是标准宽度的 3.2 倍，也即 320vw。

同时你的截图里配置了 "maxDisplayWidth": 1080，这个属性限制了 320vw 必须在屏幕宽度大于 1080px 后停止继续扩大，插件利用 CSS 函数 min，结合元素在标准宽度时的宽度 1200px 进行计算，可以得到在 1080 像素宽度时，这个元素的宽度应该是固定的 3456px（1200*1080/375）。

[KunPengZheng]

按照你的说法，也就是在可布局区域中再划分出一块区域来作为viewport，那么这个划分出来的viewport应该会在原来的可布局区域里居中。 问题：viewport为375，maxDisplayWidth为600，在移动端宽为1080的手机没有看到布局居中，这是为什么，而在pc端是有看到布局居中的

[wswmsword]

移动端忘了提了，因为现在编写页面，一般会给页面加上一个 viewport 的 meta 标签，这个标签可以让移动端的 1 个像素相当于多个实际像素，这样，当手机分辨率越来越高，实际宽度像素越来越大，展示页面的差距也不会太大。

[KunPengZheng]

按照我目前的配置和你的解释，maxDisplayWidth只作用于pc端，这样理解有问题吗

[wswmsword]

有问题，如果你把 maxDisplayWidth 设置成 200，就会看到在移动端也居中了。插件转换的结果不会识别 pc 端还是移动端，只和宽度有关。

[KunPengZheng]

麻烦解释下这段代码的作用：min函数右边数值的计算规则：（设置的px * maxDisplayWidth / viewport）

[wswmsword]

最大宽度除标准宽度是放大的比值，比值乘以标准视图下的长度像素，就是最大宽度时的长度像素。

[KunPengZheng]

请问需要作用于vant的组件的属性，需要如何配置？ 是否本插件只作用于css文件，不作用style属性

[wswmsword]

文档配置参数一节，第一个参数 viewportWidth 里提到了怎么给 Vant 配置，如果你的标准视图宽度是 750，这样设置 viewportWidth 即可，viewportWidth: file => file.includes("vant") ? 375 : 750。

文档的开头提到：

postcss-mobile-forever 可以配合 scale-view 使用，前者用于编译阶段，后者用于运行阶段。

如果你的 css 文件用于编译阶段，那就会生效，通常 style 属性都是在运行时生效，所以不走 PostCSS 编译，因此也不会生效。

[KunPengZheng]

非常感谢你耐心的解答