如何優雅地降低CSS視口單位？

CSS視口單元（vw,vh,vmin,vmax）非常好，我想開始使用它們作爲字體 - 但我注意到它們並沒有被廣泛支持。我試圖谷歌在不受支持的瀏覽器優雅退化的任何最佳實踐，但找不到任何有用的。有沒有更好的辦法超越做類似的事情：如何優雅地降低CSS視口單位？

h1 { 
     font-size: 120%; /* for unsupported browsers */ 
     font-size: 5.3vmin; /* for supported browsers */ 
    }

在此先感謝！

來源

2014-02-06 jlee

本地使用

你至少要提供一個備用：

h1 { 
    font-size: 36px; /* Some tweener fallback that doesn't look awful */ 
    font-size: 5.4vw; 
}

還講述了與FitText.js mimicing的功能。

欲瞭解更多信息，請閱讀克里斯Coyier的「視口大中印刷術」 http://css-tricks.com/viewport-sized-typography/

來源

2014-02-06 06:42:04 newTag

該帖子中有代碼，外部資源是一個更廣泛的解釋，我沒有看到問題。 – naugtur

您不能在CSS中正常降級視口單元，因爲在舊版本的CSS中，在概念上甚至沒有任何遠程相似。

例如，將字體大小設置爲120%根本無法解決問題：它只是將字體大小設置爲父元素字體大小的1.2倍，與視口大小完全無關。

但是，可以使用客戶端JavaScript來近似視口單元的效果，以便獲得視口屬性，然後根據它們設置font-size屬性。見例如回答問題Is there any cross-browser javascript for making vh and vw units work。

來源

2014-02-06 05:53:58

按How to properly use css-values viewport-relative-lengths?，我不認爲這是正確的使用視單位限制它們的外側@media查詢的最小高度和寬度視口，即使如此，我認爲只有當您知道他們將要應用的頁面非常小（例如名片樣式頁面）時才應該使用該視口，否則會留下整個視口屏幕空手。

換句話說，當你說font-size: 5.3vmin時你到底在找什麼？

如果我逐個級聯多個窗口，只留下足夠的空間在每個視口中以查看三行普通文本會怎麼樣？ 5.3vmin上的文字會很小，無法理解！同樣，如果我有一個巨大的顯示器（比如說，Seiki 39" @ 3840x2160，我必須指出，在400美元以下的價格是相當實惠的），並且您在頁面上的所有標題上使用font-size: 5.3vmin，並且文章篇幅很長，然後再使用font-size: 5.3vmin您正在剝離我的能力和舒適度，以充分享受我的顯示器可支持的所有額外文本行，而不是5個標題佔據屏幕的四分之一以上，而這可能會由多達100多行文本填充。

來源

2015-05-12 02:51:00 cnst

關於使用視口相對長度的最佳實踐的好評 – jlee

如何優雅地降低CSS視口單位？

回答

相關問題