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

網頁大小切換時(主要是高) ，根據新的尺寸調整html 的font-size px 值，程式內使用的45 是720/16 得來的值. 目標是電視，解析度是1280*720 ，手機上使用 ... Postnavigation ←Previous Next→ 最近陷入了聯網電視全螢幕廣告需求的坑內，為了適應不同電腦螢幕解析度以及手機、APP等其他需求，如何調整文字大小吃了不少苦頭。

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

解決思路： font-size使用rem單位只會根據網頁最上層設定進行比例變換 宣告htmlfont-size，網頁其他元素一律使用rem單位 網頁大小切換時(主要是高)，根據新的尺寸調整html的font-sizepx值，程式內使用的45是720/16得來的值 目標是電視，解析度是1280*720，手機上使用Chrome的行動裝置瀏覽版面是亂的，實際運行在手機則是正常 — 程式碼 HTML&CSS ThisisaBook中文檔名 ThisisaBook中文檔名 ThisisaBook中文檔名 123456789101112131415161718  ThisisaBook中文檔名ThisisaBook中文檔名ThisisaBook中文檔名 JavaScript functionf(){ varfont=window.innerHeight/45; $('html').css({'font-size':font+'px'}); } // $(function(){ $(window).resize(function(){ f(); }); f(); }); 12345678910111213 functionf(){    varfont=window.innerHeight/45;    $('html').css({'font-size':font+'px'});} //$(function(){    $(window).resize(function(){        f();    });     f();}); — 結果 理想最大版面 縮小 最小表現，font-size到了8px以下，電腦瀏覽器顯示已經不會改變 —  1,535 totalviews, 1 viewstoday 發佈留言發佈留言必須填寫的電子郵件地址不會公開。

必填欄位標示為*留言*顯示名稱 電子郵件地址 個人網站網址  411,297 totalviews, 34 viewstoday