RWD 文字自動調整 – JavaScript 解決方案

最近陷入了聯網電視全螢幕廣告需求的坑內,為了適應不同電腦螢幕解析度以及手機、APP 等其他需求,如何調整文字大小吃了不少苦頭。

有使用 vmin 這種單位,也有使用 em, rem 這種單位,不過因為邏輯不清楚,所以也沒有很好的解決問題,最後還是先做了小實驗了解特性後才解決,以下是 Hoyo 的解法。

解決思路:

  • font-size 使用 rem 單位只會根據網頁最上層設定進行比例變換
  • 宣告 html font-size ,網頁其他元素一律使用 rem 單位
  • 網頁大小切換時 (主要是高) ,根據新的尺寸調整 html 的 font-size px 值,程式內使用的 45 是 720/16 得來的值

目標是電視,解析度是 1280*720 ,手機上使用 Chrome 的行動裝置瀏覽版面是亂的,實際運行在手機則是正常

程式碼

HTML & CSS

JavaScript

結果

理想最大版面

縮小

最小表現,font-size 到了 8 px 以下,電腦瀏覽器顯示已經不會改變

175 total views, 1 views today

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。