JS根據(jù)瀏覽器窗口大小實時動態(tài)改變網(wǎng)頁文字大小的方法

更新時間：2016年02月25日 09:23:11 作者：小壞

這篇文章主要介紹了JS根據(jù)瀏覽器窗口大小實時動態(tài)改變網(wǎng)頁文字大小的方法,涉及JavaScript針對頁面寬高的動態(tài)獲取與元素樣式動態(tài)運算的相關技巧,需要的朋友可以參考下

本文實例講述了JS根據(jù)瀏覽器窗口大小實時動態(tài)改變網(wǎng)頁文字大小的方法。分享給大家供大家參考，具體如下：

目前，有了css3的rem，給我們的移動端開發(fā)帶來了前所未有的改變，使得我們的開發(fā)更容易，更易兼容很多設備，但這個不在本文討論的重點中，本文重點說說如何使用js來實時改變網(wǎng)頁文字的大小。

代碼如下：

<script>
 /* 長寬占位 rem算法, 根據(jù)root的rem來計算各元素相對rem, 默認html 320/20 = 16px */
 function placeholderPic(){
  var w = document.documentElement.offsetWidth;
  document.documentElement.style.fontSize=w/20+'px';
 }
 placeholderPic();
 window.onresize=function(){
  placeholderPic();
 }
</script>

PS：這里再為大家推薦一款非常好用的JavaScript壓縮、格式化與加密工具，功能非常強大：

JavaScript壓縮/格式化/加密工具：http://tools.jb51.net/code/jscompress

上面這款js工具中的加密功能可實現(xiàn)js代碼的eval函數(shù)加密形式，對此本站還提供了如下這款針對eval函數(shù)加密的解密工具，非常強大實用！

js的eval方法在線加密解密工具：http://tools.jb51.net/password/evalencode

更多關于JavaScript相關內(nèi)容感興趣的讀者可查看本站專題：《JavaScript查找算法技巧總結》、《JavaScript動畫特效與技巧匯總》、《JavaScript錯誤與調試技巧總結》、《JavaScript數(shù)據(jù)結構與算法技巧總結》、《JavaScript遍歷算法與技巧總結》及《JavaScript數(shù)學運算用法總結》

希望本文所述對大家JavaScript程序設計有所幫助。

您可能感興趣的文章:

style、 currentStyle、 runtimeStyle區(qū)別分析
style、 currentStyle、 runtimeStyle區(qū)別分析,需要的朋友可以參考下。
2010-08-08
JavaScript常見數(shù)組方法之如何轉置矩陣
這篇文章主要給大家介紹了關于JavaScript常見數(shù)組方法之如何轉置矩陣的相關資料,文中通過實例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下
2022-03-03
輕量級的原生js日歷插件calendar.js使用指南
網(wǎng)頁上的原生js日歷代碼，鼠標點擊文字提示處，會顯示一個帶年月日的日歷窗口，可調整年份、月份、選擇日期等，用在網(wǎng)頁上方便大家選擇日期，提高用戶體驗。各大瀏覽器都能正常運行，有需要的小伙伴可以參考下。
2015-04-04
javascript獲取form里的表單元素的示例代碼
本篇文章主要是對javascript獲取form里的表單元素的示例代碼進行了介紹，需要的朋友可以過來參考下，希望對大家有所幫助
2014-02-02
js加減乘除丟失精度問題解決方法
在javascript中，帶小數(shù)的數(shù)據(jù)運算時總會出現(xiàn)好多位小數(shù).這是因為在javascript中浮點數(shù)的計算是以2進制計算的
2014-05-05
javascript中類型判斷的最佳方式
這篇文章介紹了javascript中類型判斷的最佳方式，文中通過示例代碼介紹的非常詳細。對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下
2022-06-06
淘寶搜索框效果實現(xiàn)分析
在輸入框里面預設一段提示文字，當焦點在輸入框的時候清空這段文字，這在目前來說已經(jīng)不是什么新鮮事了。
2011-03-03
zeroclipboard復制到剪切板的flash
雖然網(wǎng)上實現(xiàn)Ctrl + C的JS代碼已經(jīng)有很多了，但我還是向大家推薦一個比較好的插件zeroclipboard，兼容所有瀏覽器
2010-08-08
uni-app 滾動到指定位置的操作方法
這篇文章主要介紹了uni-app 滾動到指定位置的操作方法,其中方法一是使用標簽,可以將頁面橫向（或縱向）滾動到指定位置還有其他多種方法,需要的朋友可以參考下
2024-05-05
基于JS實現(xiàn)html中placeholder屬性提示文字效果示例
這篇文章主要介紹了基于JS實現(xiàn)html中placeholder屬性提示文字效果,涉及javascript事件響應及頁面元素屬性動態(tài)操作相關實現(xiàn)技巧,需要的朋友可以參考下
2018-04-04