爲什麼文本在放大瀏覽器時不能保持相同的大小？

我想提出一個網站，並試圖使其很好地擴展，但文字不保持相同的尺寸。爲什麼文本在放大瀏覽器時不能保持相同的大小？

例：

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會相對同尺寸相同，當你或你的瀏覽器縮放，但文字似乎並沒有留在箱子裏。

來源

2017-03-07 BOBONA

-1

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

如果你希望它能很好地擴展，你需要爲你的css做一個相對測量。時間和百分比可以幫助你。

如果你想要的文字留下來，儘管瀏覽器相同的尺寸被放大/縮小，你可以做到這一點使用視：

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

p { 
    font-size: 2vmin; 
}

然而，這不是推薦的格式vh，vw和vmin都有compabitilies問題。

來源

2017-03-07 13:55:42 FrenchMajesty

它沒有幫助 –

你是否認爲這是一個壞主意，用VH，VW等？ – BOBONA

@BOBONA這是不是一個失敗考驗的解決方案，因爲如果用戶已經改變了他的變焦設置爲文本，只有你的頁面不會你怎麼指望迴應。 – FrenchMajesty

的一種方法是利用文字大小調整屬性，但它僅適用於Chrome和邊緣的最新版本可與支持前綴：

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

來源

2017-03-07 14:16:26

我決定，我將指定像素的一切並設置溢出滾動。這樣，無論誰看到它，他們都會看到完全相同的頁面。他們可能不得不滾動才能看到這一切。一旦更多的瀏覽器是最新與所有這些新的文本屬性，這可能是不實際的。

來源

2017-03-07 23:26:27 BOBONA

爲什麼文本在放大瀏覽器時不能保持相同的大小？

回答

相關問題