使用缩放在浏览器中保持文本答案

【问题标题】：Maintain text in browser with zoom使用缩放在浏览器中保持文本
【发布时间】：2014-04-15 13:01:48
【问题描述】：

我正在使用 fullpage.js 建立一个网站。当放大 100% 时，网页看起来很棒，然而，当放大 25% 时，文本和图像将开始重叠甚至消失，因为每个部分的高度非常有限（没有滚动），使我的网页无法阅读。我正在使用 em 字体大小的单位和大小、imgs 和边距的百分比（除非它的边距太小（例如，5px），我在这里使用像素）。因此，我想知道是否有使用 Javascript、CSS 或 HTML 的解决方案，即使网页被缩放也可以保持字体大小。到目前为止，我已经尝试了以下方法，但没有成功：

document.body.style.zoom="100%"

-webkit-text-size-adjust: none;

使用整页的resize功能，但只有在页面加载后用户调整窗口大小时才有效。

document.body.style.webkitTransform = 'scale(1)'

我的网站是（抱歉，我不知道该发布哪个部分，因为问题涉及所有内容）：

http://rienpipe.es

提前致谢！

【问题讨论】：

你应该使用 CSS 媒体查询。
他们工作！谢谢！再问一个问题，缩放时，文字看起来很模糊，有什么办法可以避免这种情况？

标签： javascript html css fonts fullpage.js

【解决方案1】：

您可以通过在您的 css 中使用 @media 查询和视口来解决此问题，并将此元标记添加到您的 html：

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

通过@media 查询和视口，您可以使用 css 中的媒体查询 + 视口声明每个屏幕宽度的大小：

 @media screen and (min-width: 820px) and (max-width: 920px) {
  @viewport { width: 820px; }

// 宽度在 820 到 920 像素之间的屏幕的 css 放在此处

我主要使用值的：从 20 - 600 , 600-700 , 700-820 , 820 - 920 , 920 - 1200, @media screen and (min-width: 1200px){ @viewport { width: 1200px; }（这最后一个将为宽度大于 1200 像素的任何屏幕设置大小，因此您的最大版本的代码将放在这里}

所以这意味着你的 css 代码将适应大小的 6 倍。

这称为自适应或响应式设计，很容易做到

有关更多信息，您可以查看此http://css-tricks.com/snippets/css/media-queries-for-standard-devices/

【讨论】：