思考响应式设计中的“缩放”

Posted 2023-03-06

【中文标题】思考响应式设计中的“缩放”

【英文标题】：Thinking of the 'zoom' in responsive design

【发布时间】：2013-08-29 03:33:08

【问题描述】：

我正在尝试使用 html 和 CSS 进行响应式设计，这是我的问题：

如果你只调整窗口大小，布局适合，如果你只缩放，布局又适合，我没有问题，但如果你在调整窗口大小时缩放，布局会有点中断。

找到解决方案重要吗？我对 200%、300% 的缩放级别没有任何问题，大多数情况下 400% 或 500% 都会给我带来一些问题。

【问题讨论】：

浏览器缩放是垃圾。小数像素上的舍入错误会破坏布局。这是事实。

也许这篇关于使用 EM 进行媒体查询中断的文章可能会有所帮助？ blog.cloudfour.com/…

这与@Jondlm 所说的事实完全一致。为了避免缩放导致设计中断，您需要使用em 测量单位。

好的，谢谢你的文章我正在阅读它。

接受其他建议，如果您使用基于 em 的媒体查询，susy.oddbird.net 是一个不错的选择

【参考方案1】：

一般来说，响应式布局不需要缩放，因为它适合设备/浏览器窗口并且被设计为“手指友好”。为了帮助解决这个问题，您可以使用此viewport 来阻止用户缩放：

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

【讨论】：

这在我的安卓浏览器上工作谢谢，但有没有办法在 Chrome、Firefox 或 IE 上做到这一点

因为这些是桌面浏览器，所以可以说没有“视口”。您可以查看媒体类型：***.com/questions/4787564/…

我知道这是一个旧的答案，但这完全忽略了可访问性等问题。视力受损的人可能需要缩放选项。