視口viewport與單位rem的本質

結論:

  視口viewport的設置是爲了讓字的顯示在不一樣的屏幕下保持一致.

 單位rem的使用是爲了讓頁面中的佈局元素的比例在不一樣的屏幕下顯示的比例保持一致.

現象:

  咱們看電腦時候的網頁的時候的字體大小假如是font-size:20px,可是一換到手機上的時候顯示字體就會變得太小,這是由於viewport的關係.

 viewport概念:決定一個屏幕可以顯示的最大布局寬度,若是一個ipone6手機的可視視圖爲375像素,但讓它的佈局寬度以960px去顯示就會適當的縮小總體佈局來容納可視視圖,也就是可視視圖的1個像素對應佈局視圖的960/375px個像素,因此雖然css中font-size:20px沒有變化可是物理上的像素產生了變化

 

 

 那若是咱們把viewport設置爲可視界面的寬度,那麼佈局視圖的px與可視視圖的px意義對應,字體也不會縮小

 

 若是viewport=device-width可否說明佈局視圖的大小就是不會超出設備的寬度了呢,視圖的寬度確實是不會超出設備的寬度可是元素的長度若是超出375的範圍了仍是會有滾動條的.

狀況1:(設置viewport=device-width的時佈局頁面與設備寬度的比例狀況)

 

 

 

狀況2:(設置viewport=device-width的時佈局頁面溢出時與設備寬度的比例狀況)

 

 

 

 

狀況2:(不設置viewport=device-width時view-port的佈局頁面與設備寬度的比例狀況)

 

    咱們該如何解決上述問題呢,就是當設計在ipne6的上頁面在ipone4的頁面上也能顯示出來,並且不會出現超出的滾動條,這就須要捨棄px固定單位,採用rem的單位

 rem單位的簡述,能夠根據網頁的根元素來設置字體大小的相對單位來改變.

 一般咱們設置640的html{font-size:100px}這樣咱們能夠輕鬆的寫出關於設計稿上的1px轉換成rem就是0.01rem

    咱們須要知足如下關係式  640/320 = 100/fs    求出fs得出相應須要改變的font-size,而一旦改變了根元素font-size的值,之前定義的rem單位的值也會隨之發生改變,無需一個一個的去修改,rem的做用就是經過修改一個html下的font-size元素,其餘用rem的元素寬度也會同時改變.並且這個關係的fs能夠經過js來動態獲取,這樣咱們就見簡單的實現了移動的自適應.

1 <script>
2     var des = 640; //設計搞的寬度
3     var winW = document.documentElement.clientWidth; //當前設備的物理寬度
4     document.documentElement.style.fontSize = winW/desW*100+"px"; //獲取以font-size的100px爲基準的相對比例字體大小
5 </script>