由一次動態改變font-size的大小引伸的一系列困惑補錄

 

如下結論若有錯誤，歡迎指正

在切入正題以前，先了解下window 和document這兩個大對象

　　咱們熟知 JavaScript的組成以下圖所示：

　　

window對象和document對象分別屬於哪一個分支下面呢？

 

 發現： 在控制檯打印出的document對象和window.document打印出來的對象是一致的

緣由是由於： 日常咱們以document開頭的各類API 實際上都是省略了window

如今對於window和documen有了初步理解以後

如今拋出如下幾個屬性

window.outerHeight ? window.innerHeight? document.documentElement.clientHeight ? document.body.clientHeight? offsetHight? scrolHeight? 腦殼瞬間123

那麼就一個個攻破吧

window.outerHeight & windwo.innerHeight

顧名思義，從window開始，咱們知道window屬於BOM範圍，BOM指的是瀏覽器對象模型，存儲瀏覽器的各類信息個API，因此 

window.outerHeight 

     便是整個瀏覽器的外邊高度（包含了導航欄，橫向滾動條等）

windwo.innerHeight 

    瀏覽器除去導航欄，橫向滾動條剩下的DOM的視口大小

經檢驗： 

　　在移動端瀏覽器中： window.outerHeight  = windwo.innerHeight ；

　　　　　　在移動端中 二者且是設備的邏輯像素（也叫作CSS像素）

       在PC瀏覽器中：      window.outerHeight  ≠ windwo.innerHeight ；

瀏覽器兼容性： 兼容到IE8

 document.documentElement.clientHeight && document.body.clientHeight

從document開始，那麼描述的是文檔對象模型這個對象的相關屬性和API，因此

document.documentElement.clientHeight 

        文檔對象模型中HTML標籤的高度

document.body.clientHeight

        文檔對象模型中body標籤的高度

經檢驗：

        在移動端中 document.documentElement.clientHeight = document.body.clientHeight

        在PC端中 document.documentElement.clientHeight ≠ document.body.clientHeight

 兼容性： 兼容到IE6

offsetHight

 一般咱們當即offset就是偏移的意思，即頁面滾動，從頁面開始到滾動到的位置的偏移高度

scollHeight

滾動的高度，包含頁面沒有顯示出來的，頁面的總體高度

理解了以上的幾點以後，腦殼忽然想到移動端設配的REM是經過獲取docuemt.documentElement.clientWidth來動態改變html標籤的font-size的大小，該邊font-size的大小的緣由是由於會用到REM來匹配1rem 等於HTML元素的font-size的大小，這時候腦殼又想到REM? EM ? PX？ 

PX 

設備中的最小顯示單位，不可改變

EM

以元素外層的父元素的font-size做爲參照基準，元素的 1em = 元素的父級元素的font-size的大小

REM

以HTML標籤的font-size大小爲參照基準，元素的1rem = html變遷的font-size大小

晚點畫一張圖，表示關係。