調整流體/響應式設計的文字大小優雅解決方案的性能？

我發現下面的JS解決方案，基於視窗的大小有字體大小相當考究：調整流體/響應式設計的文字大小優雅解決方案的性能？

https://stackoverflow.com/a/10295733/1318135

onresize=onload=function(){document.body.style.fontSize=window.innerWidth+"px"}

不過，也有2個問題：

它依賴於視正在調整大小。我想在第一次加載頁面的時候觸發它，但是JS是一個新手。
我的頁面完全使用em值進行編碼;這使用px。我如何使用它來調整默認em尺寸只有，然後它會自動滴流到頁面上的其他元素？

http://jsfiddle.net/hFNc7/

謝謝！

來源

2012-08-03 user1318135

見對方的回答（或把http://jsfiddle.net/cjzEK/1/你的頁面的底部）
EM是不是對自己的尺寸。這是一個百分比寫的不同。 em適用於你的唯一方法是因爲在瀏覽器中設置了1個基本字體大小（或者也可能是重置樣式表）。瀏覽器中通常的字體基本大小是16px。所以這個解決方案所做的是通過將它添加到主體來改變基本大小（將它添加到html中可能會更好）。

例如， p{font-size:1em;}沒有做任何重置將是16px。 1.5em將是24px。

來源

2012-08-03 16:01:52

Gueze根據問題的代碼，我嘗試做類似'onresize = onload = function（）{document.getElementById（「post」）.style.fontSize = document。 getElementById（「icon」）。width +「px」};'where'post'是一個按鈕的id，'icon'是一個div。我嘗試將按鈕字母的大小設置爲div。不起作用。有什麼建議嗎？謝謝 – slevin 2013-11-12 03:13:23

寬度不是div的可用屬性。嘗試'docum ent.getElementById（「icon」）。clientWidth'來獲取元素的實際渲染寬度，包括填充。您可以在MDN上閱讀這些信息，等等。如果你需要更多的幫助，你應該開闢一個新的話題（搜索相關的話後） – 2013-11-12 08:21:41

Geuze Works很好，但由於某些原因，文本的大小是巨大的。無論如何，我會繼續搜索。不管怎麼說，還是要謝謝你 – slevin 2013-11-12 23:52:50

您需要在body的load事件中運行該代碼。這樣做的最簡單方法是directy設置它通過其onload屬性：

<body onload="var f = function() { document.body.style.fontSize = 0.2 * window.innerWidth + 'px'; }; window.onresize = f; f();">

做些什麼：

創建一個功能，那就是能夠動態地設置字體大小。
將函數設置爲resize事件偵聽器。
立即執行該功能。

PS：有更優雅的方式來寫這個，但是既然你是新手，可能會更好一些，從一個更簡單的符號開始。

來源

2012-08-03 15:59:54

我只是忘了提及，如果你願意，你可以把'px'改成'em'。但我建議你絕對設置一個默認尺寸。否則你會依賴於用戶的瀏覽器設置。 – 2012-08-03 16:01:41

這很有道理。我可能會使用這個解決方案，但我很好奇你提到的更優雅的東西是什麼。 – user1318135 2012-08-03 16:15:54

更優雅的是不會將它寫入html文件，而是寫入單獨的JavaScript文件中。 – 2012-08-03 16:33:40

調整流體/響應式設計的文字大小優雅解決方案的性能？

回答

相關問題