javascript - postcss如果让网页在web端显示的和移动端一样的尺寸大小？
这是我得postcss配置postcss: { plugins: [ postcssPxToViewport({ unitToConvert: 'px', viewportWidth: 750, unitPrecision: 6, viewportUnit: 'vw', selectorBlackList: ['.ignore', '.hairlines'], minPixelValue: 1, mediaQuery: false, exclude: [/node_modules/] }), ], } },移动端没有问题，在网页端尺寸直接就占满屏了。
如何像人家这样，在web端也显示移动端的样式，postcss 需要怎么配置？
共有2个答案
你可以通过限制最大宽度来实现这个效果,要不想办法用iframe写两套页面,你也可以尝试使用另一个插件postcss-mobile-forever
postcss-mobile-forever 可以实现限制最大宽度，原理就是我上面说的，提供了两个办法，把新 px 放到插件生成的媒体查询里，或者转为 css 函数。最后可以实现移动端、桌面端和移动端横屏都有蛮好的展示效果。https://blog.csdn.net/weixin_37901601/article/details/136644370
要在网页端也显示移动端的样式，并且使用 PostCSS 来处理尺寸单位，通常我们需要考虑到响应式设计，而不仅仅是简单地将像素单位转换为视口单位（如vw）。以下是一些可能的步骤和配置建议，帮助你实现这个目标：
- 确保你的 HTML 设置了正确的视口：在 HTML 的
<head>部分，确保你有一个视口 meta 标签，这样浏览器就能正确地缩放页面内容以适应不同的屏幕尺寸。
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">- 使用媒体查询：虽然你在配置中禁用了媒体查询（
mediaQuery: false），但响应式设计通常需要使用媒体查询来定义不同屏幕尺寸下的样式规则。你可以根据需求设置断点，并在这些断点下应用不同的样式。 - 调整 PostCSS 配置：虽然你已经使用
postcssPxToViewport插件将像素单位转换为视口单位，但这可能不足以解决所有问题。确保你的转换逻辑是正确的，并且适用于你的设计。你可能需要调整viewportWidth的值来匹配你的设计稿宽度，或者调整其他配置选项。 - 使用 CSS Grid 或 Flexbox：这些 CSS 技术可以帮助你创建灵活的布局，它们能够自动调整以适应不同屏幕尺寸。
- 避免固定尺寸：确保你的 CSS 中没有使用固定宽度或高度，除非有特定的设计需求。相反，使用百分比、视口单位或其他相对单位来定义尺寸。
- 测试与调试：使用不同设备和屏幕尺寸测试你的网页，确保它在各种情况下都能正确显示。使用浏览器的开发者工具可以帮助你检查并调试布局问题。
- 考虑使用其他工具：如果 PostCSS 配置无法满足你的需求，你可能需要考虑使用其他工具或库来帮助你实现响应式设计，如 Bootstrap、Tailwind CSS 或其他前端框架。
关于你的问题，仅通过调整 PostCSS 配置可能不足以完全解决网页端显示移动端样式的问题。你需要结合响应式设计原则和其他前端技术来实现这一点。如果你想要保持网页端和移动端在视觉上一致，你需要确保你的布局和样式能够适应不同屏幕尺寸和分辨率。这通常涉及更多的工作，而不仅仅是转换单位。
请注意，提供的答案是一个通用的建议，具体实现可能会因你的项目需求和设计而有所不同。
-
我修改了滚动条的颜色，但是修改后它就变成常驻的了，我希望它和之前一样，只在滚动的时候才显示出来。 下面是我的代码： 我该如何修改？
-
问题内容： 嗨，我正在编写图形程序，我一直在寻找一种获取所使用屏幕物理尺寸的方法。我可以获得以像素为单位的屏幕大小以及逻辑分辨率。我似乎找不到任何地方可以获取任何显示器规格中始终具有的物理尺寸（例如19“-376 x 301 mm）。问题是，加载此信息时，此信息是否甚至还存储在OS中的任何位置？我正在编写的程序需要在Mac和Windows上运行。 谢谢！ nt 问题答案： 我认为Java不可能实现
-
我正在下运行 在执行之后，终端（putty）大小更改。 前给出后
-
网页如何做到所见即打印的效果呢 我用了bootstrap等一些框架，大量使用里面的css样式 然后ctrl + P打印时啥也米有，就是一些乱七八糟的框子 但是google随便搜个东西，ctrl + P后打印的都是页面显示出来的样子 要怎么做呢 我试了css引入时加media=all，好像没有用
-
问题内容： 我在不知道相应图像的宽度/高度的情况下将标签放入文档中： 我想使用CSS将图像缩放到其“本机”大小（基础图像的大小）的一半。我不知道该怎么做。 使用将相对于包含块而不是图像的大小。 我无法调整为特定的像素宽度，因为我不知道图像的尺寸。 由于我只需要支持WebKit，因此我尝试使用转换： 这样可以很好地调整图像，但不会调整图像元素本身的大小。 @Radagaisus建议使用Javascr
-
我正试图了解OAuth2和SpringSecurityOAuth，尤其是OAuth提供者服务。我正在尝试实现以下内容： OAuth提供商 资源服务器（应使用OAuth提供程序（1）保护的RESTful Web服务） Web客户端（使用Spring Security性保护的Web客户端应用程序，但应使用OAuth提供程序（1）对用户进行身份验证 本机移动客户端（Android和iOS）也应该使用OA