在CSS中，使用頁面大小更改時的vmin/vmax屬性

使用新的vmin css屬性可以獲取正確的字體大小。作品絕對好！在CSS中，使用頁面大小更改時的vmin/vmax屬性

div.sample { font-size: 1.5vmin; text-align: center; ... }

頁面調整大小時發生該問題。例如，如果頁面變得更小，則font-size保持不變，使得所有事情都變得不合時宜。

首先，瀏覽器應該處理這個問題嗎？

秒，處理它的最好方法是什麼？似乎如果我使用觸發器來設置font-size，那麼我需要知道javascript以及css中的字體大小值，從而創建一個必然失敗的情況。

來源

2013-02-22 cc young

它看起來像vmin在Firefox的表現。

這裏是我的測試做了的jsfiddle： http://jsfiddle.net/noahcollins/Sc8gm/

這聽起來像你看到在鉻的問題？正如Bazzz指出的那樣，還有一個Chrome bug仍然是開放的。我能夠在加那利複製它。 CSS Tricks article可以幫助你解決它與一些JavaScript如果你是如此的傾向。

另一件事要記住：對vmin支持移動瀏覽器是very limited at this time，所以這將是在案件的問題，當用戶之間的縱向&橫向旋轉。

來源

2013-02-22 08:49:35

感謝您的信息 – 2013-02-23 00:23:51

假設這是一個已知的錯誤，正如CSS-Tricks所述。他們也有一個JavaScript的解決方法，有頭下這裏來看看「錯誤！」：

http://css-tricks.com/viewport-sized-typography/

建議的解決方法通過CSS的技巧

要解決這個問題（允許在不調整頁面刷新），您需要對元素進行「重繪」。我使用了jQuery，並且只用弄亂了每個元素（在這種情況下不相關）z-index值，這會觸發重繪。

causeRepaintsOn = $("h1, h2, h3, p"); 
$(window).resize(function() { 
    causeRepaintsOn.css("z-index", 1); 
});

來源

2013-02-22 08:34:08 Bazzz

vmin是移動網頁設計的好主意，但瀏覽器的支持是有限的。此外，確實存在的瀏覽器支持表現出一些奇怪的行爲。例如，因爲vmin會根據當前屏幕大小計算字體大小，所以當您關注文本輸入元素時，您將遇到麻煩，因爲有時文本會根據您使用的窗口小得多來調整大小鍵盤打開。所以有時你的文本輸入會自發地變小，這是令人難以置信的煩人。因此，我建議使用vw，以根據屏幕寬度來維護文本大小。它有助於改善用戶體驗。 vh的問題與我上面提到的相同。

來源

2013-10-17 03:21:34 nik

在CSS中，使用頁面大小更改時的vmin/vmax屬性

回答

相關問題