Question

我正在建立一个网站并试图使其扩展得很好，但文字并没有保持相同的大小。

例如：

＆＃13;

p {
  width: 10%;
  height: 10%;
  background-color: rgb(0,0,0);
  top: 50%;
  left: 50%;
  position: fixed;
  color: rgb(255,255,255);
  font-size: 175%;
}

＆＃13;

<!DOCType html>
<html>
  <head>
    <title>:(</title>
  </head>
  <body>
    <div><p>TEXT</p></div>
  </body>
</html>

＆＃13;

这只是一个例子。不完全是我这样做的。当您放大或缩小浏览器时，div的大小将相同，但文本似乎不会保留在框中。

Answer 1

一种方法是使用text-size-adjust属性，但它仅适用于最新版本的chrome和edge，并支持前缀：

https://developer.mozilla.org/en-US/docs/Web/CSS/text-size-adjust

Answer 2

我决定以像素为单位指定所有内容并设置溢出以滚动。这样，无论谁看到它，他们都会看到完全相同的页面。他们可能只需要滚动查看全部内容。再一次使用所有这些新文本属性的浏览器都是最新的，这可能不实用。

Answer 3

上一个答案：尝试使用em代替百分比。

如果您希望它能够很好地扩展，您需要对css进行相对测量。 em和百分比可以帮助你。

如果您希望文本保持相同的大小，尽管浏览器放大/缩小，您可以使用视口实现此目的：

https://css-tricks.com/examples/ViewportTypography/

p {
  font-size: 2vmin;
}

但是不建议这样做，格式为vh，vw和vmin会出现个别问题。

为什么放大浏览器时文字的大小不一样？

3 个答案: