Question

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

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

-webkit-text-size-adjust: none;

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

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

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

http://rienpipe.es

先谢谢！

Answer 1

您可以使用@media查询和css中的视口来解决此问题，并将此元标记添加到您的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和（min-width：1200px）{@ viewport {width ：1200px; }（最后一个将设置任何大于1200像素宽度的屏幕的大小，所以你的代码最大的版本在这里进行}

因此，这意味着您的css代码将被调整为适应大小的6倍。

这称为自适应或响应式设计，非常容易实现

有关详细信息，请查看此http://css-tricks.com/snippets/css/media-queries-for-standard-devices/

使用缩放功能在浏览器中维护文本

1 个答案: