通过缩放在浏览器中维护文本

Maintain text in browser with zoom

本文关键字：维护 文本 浏览器 缩放      更新时间：2023-09-26

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

document.body.style.zoom="100%"
-webkit-text-size-adjust: none;

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

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

我的网站是（对不起，我不知道该发布它的哪一部分，因为问题涉及到所有内容）：

http://rienpipe.es

提前感谢！

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

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

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

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

//宽度在820到920像素之间的屏幕的css显示在这里

  }

我主要使用的值是：从20-600，600-700，700-820-920，920-1200，@media screen和（最小宽度：1200px）{@viewport{宽度：1200px；}

因此，这意味着你将有6倍的css代码，它将适应大小。

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

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

相关文章：