資料大屏響應式布局rem

資料大屏響應式布局，主要用到rem，涉及乙個rem.js檔案，需要安裝乙個依賴 postcss-px2rem ，此外還用到vw、vh 、百分比相對單位來設定布局寬度。

1、什麼是rem？摘自菜鳥教程

rem是css3新增的乙個相對單位（root em，根em），這個單位與em有什麼區別呢？區別在於使用rem為元素設定字型大小時，仍然是相對大小，但相對的只是html根元素。這個單位可謂集相對大小和絕對大小的優點於一身，通過它既可以做到只修改根元素就成比例地調整所有字型大小，又可以避免字型大小逐層復合的連鎖反應。目前，除了ie8及更早版本外，所有瀏覽器均已支援rem。

2、postcss-px2rem 的作用是把css檔案中的px自動轉為rem 

寫css樣式時，寫固定的px，通過該外掛程式將自動轉換px為rem。比如設定頭部高度為80px，在瀏覽器中檢視 按f12，會看到對應的css變為了5.714286rem，此時根節點的font-size: 11.6375px;，計算出頭部高度為 11.6375 *5.714286=66.5px

3、rem.js檔案如下：

1 const basesize = 142//

設定 rem 函式
3 const setrem=()=>else
131415}
16//
初始化17
setrem()
18//
改變視窗大小時重新設定 rem
19 window.onresize = function
() 

當改變視窗時，根據當前視窗寬度重新計算根節點的fontsize

頁面中rem的值對應也將重新計算。

4、使用相對單位來設定布局寬度

比如vw，vh （代表視窗的寬和高）

設定100vw 相當於設定百分百視窗寬，10vw相當於設定10%的視窗寬

比如百分比來定義寬高，100% 30%

最外層的div寬高設定好後，內部的div用百分比來定義，相對於外層，多高。

如下所示，

大屏左中右三個div設定樣式如下： 用百分比設定寬度，當調整視窗寬度的時候，div的寬自動變了。

1

#centerbox
10#centerbottombox
1419
#rightbox
28#leftbox

rem響應式布局

監聽瀏覽器，針對不同解析度計算font size function doc,win if doc.addeventlistener return win.addeventlistener resizeevt,recalc,false doc.addeventlistener domcontentlo...

REM響應式布局

因為能相容，手機 平板 pc終端既省錢又省力 有很多 的解決辦法是，為不同的裝置提供不同的mobile版本，或者iphone ipad版本。這樣效果 但是比較麻煩，同時要維護好幾個版本 於是，一次設計，普遍適用 根據螢幕寬度，自動調整布局 layout 第一步 meta vp標籤 meta name...

如何利用rem做響應式布局

第一步 由於一些解析度不同等的一些原因，要做到能夠適配，開始要加這個一句話 詳情的參考 第二步 在css中寫這麼一些clss類，實現根據螢幕的大小設定字型大小，為什麼設定字型，由於rem這個計算單位需要參考html的font size值來進行計算，由於計算得到的結果不同，大小也自然不同！html m...