關於rem布局摘錄

一般情況下使用em或者rem的時候，會寫個樣式：html,body / html，這樣設定方便了em、rem與px相互轉換，因為瀏覽器預設字型大小16px，所以em的初始值為1em=16px。當設定了body時，1em則=16px*62.5%=10px。但是由於谷歌不相容，所以我個人習慣使用 html。

目前有兩種適配方式：

根據js來調整html的字型大小；

另一種則是通過**查詢來調整。

1、推薦使用，相容性好

(function

(designwidth, maxwidth) ;
if (width >maxwidth) 
var rem = width * 100 /designwidth;
//相容uc開始
rootstyle="html';
rootitem = document.getelementbyid('rootsize') || document.createelement("style");
if(!document.getelementbyid('rootsize'))
if(rootitem.stylesheet)
else
catch(f)
}//相容uc結束
docel.style.fontsize = rem + "px";
};refreshrem();
win.addeventlistener("resize", function
() , 
false
);    win.addeventlistener("pageshow", function
(e) 
}, false
);    
if (doc.readystate === "complete")  
else
, false
);    }
})(750, 750);

要點：

2、相對簡便

(function

(doc, win) ;
if (!doc.addeventlistener) return
;　　win.addeventlistener(resizeevt, recalc, 
false
);　　doc.addeventlistener('domcontentloaded', recalc, false
);})(document, window);

html 

@media only screen and (min-width: 481px) 
}@media only screen and (min-width: 561px) 
}@media only screen and (min-width: 641px) 
@media only screen and (min-width: 751px) 
body 
}

要點：

關於rem布局

我們知道，當使用rem布局，並配合js動態按照比例設定html標籤上的rem值時，整個頁面是按照螢幕的寬度來整體縮放的。對於高度不限制的頁面 也就是超出一屏頁面可以滾動 這種方案沒有任何問題，簡單暴力。但是對於一些需要布滿一整屏的頁面 比如現在流行的上下 左右滑動的那種 由於乙個頁面的元素必須在乙個...

關於rem布局的理解

將頁面的 設計稿等比例的進行縮放 首先是計算視覺稿到頁面的比例 假設這個比例是a a 視覺稿的寬度 頁面的寬度 document.documentelement.clientwidth 根據這個比率去計算 螢幕上應該顯示的寬度 假設這個值是 b b 量取的寬度 a 現在我們獲取了元素在螢幕上顯示的乙...

關於rem 布局的理解

頁面中使用的rem單位是相對於 html 這個根節點的作為參考，預設的情況下html的字型大小16x,在什麼也不做處理的情況下，頁面中如果使用了rem，那麼這時候的1rem表示的就是1 16 16px 2rem表示的就是32px的大小 在寫手機端頁面時封裝的rem自適應js檔案如下 這個js裡面設定...