放大瀏覽器時，為什么文本大小保持不變？

Question

我正在建立一個網站並嘗試使其縮放良好，但文字大小保持不變。

例如：

 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%; }

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

這只是一個例子。 不完全是我的做法。 當您放大或縮小瀏覽器時，div的大小將相對相同，但是文本似乎不會保留在框中。

Answer 1

一種方法是利用text-size-adjust屬性，但它僅在支持前綴的最新版本的chrome和edge中起作用：

Answer 2

我決定我將以像素為單位指定所有內容，並將溢出設置為滾動。 這樣，無論誰查看它，他們都將看到完全相同的頁面。 他們可能只需要滾動即可查看全部內容。 一旦更多的瀏覽器都具有所有這些新的文本屬性，這可能就不可行了。

Answer 3

先前的答案：嘗試使用em而不是百分比。

如果要使其縮放良好，則需要對CSS進行相對測量。 em和百分比可以為您提供幫助。

如果您希望文本在放大/縮小瀏覽器時仍保持相同的大小，則可以使用視口實現此目的：

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

p {
  font-size: 2vmin;
}

但是，不建議這樣做，並且格式vh，vw和vmin存在兼容性問題。