缩放挤压

最近有一些关于关闭响应式设计的讨论：Bruce Lawson、Webmonkey，我之前也写过关于它。 需要明确的是，我非常喜欢响应式设计，但我希望我们都能同意，对工具教条主义毫无意义。

命运使然，我收到了一位读者的邮件

我使用的是 13 英寸的 MacBook Air，并且在浏览网页时经常使用缩放功能，因为我的视力不太好。

您的网站在这方面很难操作，因为全局百分比宽度会压缩内容。我在很多 RWD 网站上都发现了这个“bug”。这使得我很难访问内容。

他们是正确的。缩放几次没什么大不了的，但当你缩放四五次时，内容就会变得非常混乱。

出于好奇，我问道：“如果页面扩展到超出浏览器窗口宽度，对你来说是否更好？这样你也可以水平滚动？”

是的，我更喜欢水平滚动。我认为如果我通过放大导致页面中断，那么我也应该负责水平滚动。

听到这个很有意思，因为水平滚动是网页设计师普遍厌恶的事情之一，我们不惜一切代价避免它。即使在固定宽度时代也是如此。我们应该提升到*倒吸一口凉气* 1024px 宽度的网站吗？不！这可能会导致水平滚动！

需要明确的是，我仍然认为这是一件坏事，只是有趣的是有人认为如果他们“破坏”了页面，就应该“负责”这样做。他们需要感觉自己需要“破坏”网站才能阅读它，这真让人沮丧。

这是我的错。但是基于 EM 的媒体查询可以解决！有点！

我的媒体查询使用的是像素。如果将它们更改为 EM，那么当您放大时，EM 大小会发生变化，媒体查询应该会在像素媒体查询无效的地方生效。所以我就是这么做的，效果很好！**但是请注意：您必须刷新屏幕才能看到媒体查询生效，**它不会随着缩放而发生。我希望它能这样做，但我怀疑经常这样做的人知道需要刷新。根据我的经验，至少 Chrome 对每个站点的首选缩放级别特别持久。

我的基本字体大小是 16px，所以我只需对所有这些进行“在项目中查找”并进行转换。

@media (max-width: 1200px) { }

变成

@media (max-width: 75em) { }

幸运的是，我使用了花哨的 Sass @content 混合宏，因此通过更改一个混合宏就更改了绝大多数内容。

请注意，我甚至在较小的宽度下降低了我的字体大小，但浏览器缩放足以使文本更大。

此外，感谢 Lyza Gardner 几乎一年前向我们展示了基于 em 的媒体查询的优势。

假设过大？

所以现在我已经“修复”了这个问题，并且布局在放大时不再“中断”。但这对于给我写信的读者来说绝对更好吗？他们明确告诉我他们更喜欢水平滚动，而这不是我提供的解决方案。我假设没有水平滚动的未中断布局更好。但谁知道呢，也许他们不喜欢移动布局，即使我不限制您可以做什么。永远都在跳舞。