postcss如果让网页在web端显示的和移动端一样的尺寸大小？

作者站长头像
站长
· 阅读数 5
这是我得postcss配置
postcss: {
      plugins: [
        postcssPxToViewport({
          unitToConvert: 'px',
          viewportWidth: 750,
          unitPrecision: 6,
          viewportUnit: 'vw',
          selectorBlackList: ['.ignore', '.hairlines'],
          minPixelValue: 1,
          mediaQuery: false,
          exclude: [/node_modules/]
        }),
      ],
    }
  },

移动端没有问题，在网页端尺寸直接就占满屏了。postcss如果让网页在web端显示的和移动端一样的尺寸大小？

如何像人家这样，在web端也显示移动端的样式，postcss 需要怎么配置？postcss如果让网页在web端显示的和移动端一样的尺寸大小？

回复
1个回答
avatar
test
2024-06-19

你可以通过限制最大宽度来实现这个效果,要不想办法用iframe写两套页面,你也可以尝试使用另一个插件postcss-mobile-forever

postcss-mobile-forever 可以实现限制最大宽度，
原理就是我上面说的，提供了两个办法，把新 px 放到插件生成的媒体查询里，或者转为 css 函数。
最后可以实现移动端、桌面端和移动端横屏都有蛮好的展示效果。

https://blog.csdn.net/weixin_37901601/article/details/136644370

回复
likes
适合作为回答的
  • 经过验证的有效解决办法
  • 自己的经验指引，对解决问题有帮助
  • 遵循 Markdown 语法排版，代码语义正确
不该作为回答的
  • 询问内容细节或回复楼层
  • 与题目无关的内容
  • “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容