在响应式设计中考虑“缩放”

Question

我正在尝试使用HTML和CSS进行响应式设计，以下为我的问题：

当你只调整窗口大小时，布局可以适应；当你只进行缩放时，布局也会适应。但如果在窗口调整后进行缩放，则布局会有些混乱。

这个问题很重要吗？对我来说，200％，300％的缩放没有问题，但400％或500％的缩放对我来说会造成一些问题。

- user2694307

---

浏览器缩放很垃圾。对于小数像素的舍入误差会破坏布局。这是事实。 - Diodeus - James MacFarlane

也许这篇关于在媒体查询中使用EM的文章会对你有所帮助？http://blog.cloudfour.com/the-ems-have-it-proportional-media-queries-ftw/ - Jondlm

这与@Jondlm所说的完全相关。为了避免缩放时出现设计问题，您需要使用“em”作为度量单位。 - sulfureous

好的，谢谢你分享这篇文章，我正在阅读它。 - user2694307

继续其他建议，如果您要使用基于em的媒体查询，则http://susy.oddbird.net/是一个可靠的选择。 - David Taiaroa

Answer 1

通常情况下，响应式布局不需要缩放，因为它适合设备/浏览器窗口并且已经被设计为“指尖友好”。为了帮助实现这一点，您可以使用此viewport来防止用户缩放：

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

- Lost Left Stack

---

这在我的安卓浏览器上可以运行，谢谢。但是有没有办法在Chrome、Firefox或IE上实现呢？ - user2694307

由于这些是桌面浏览器，所谓的“视口”并不存在。您可以查看媒体类型：https://dev59.com/bW445IYBdhLWcg3wl7XW - Lost Left Stack

我知道这个回答已经很老了，但它完全忽略了可访问性这样的问题。视力受损的人可能需要缩放选项。 - ceejayoz