2

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

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

-webkit-text-size-adjust: none;

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

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

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

http://rienpipe.es

先谢谢了！

4

1 回答 1

1

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

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

并使用@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 和 (min-width: 1200px){ @viewport { width: 1200px; }（最后一个将为宽度大于 1200 像素的任何屏幕设置大小，因此您的最大版本的代码将放在这里}

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

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

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

于 2014-04-16T08:25:17.433 回答