今天創新互聯的網站開發工程師將為大家帶來在日常開發中常見的rem布局設計，今天創新互聯則為大家分享一下常見的rem布局的設計經驗，讓大家可以在日后的網站開發中更好的使用與再次開發。

網易的rem布局
隨著分辨率的增大，頁面的效果會發生明顯變化，主要體現在各個元素的寬高與間距。375680的比320680的導航欄明顯要高。能夠達到這種效果的根本原因就是因為網易頁面里除了font-size之外的其它css尺寸都使用了rem作為單位，比如你看導航欄的高度設置代碼：

header,footer{

height:.90rem;

}

網易頁面上html的font-size不是預先通過媒介查詢在css里定義好的，而是通過js計算出來的，所以當分辨率發生變化時，html的font-size就會變，不過這得在你調整分辨率后，刷新頁面才能看得到效果。你看代碼就知道為啥font-size是直接寫到html的style上面的了（js設置的原因）. 這樣的話，每個頁面中的寬高以及具體值只要除以100即可，而根節點的字號則是font-size=deviceWidth / 6.4，頁面寬度如果是640px，則轉換之后是6.4rem。需要注意的是，字號需要額外的媒體查詢，而不是rem定的。

//字號單獨用px即可 ，這里建議大家用變量定義小中大正常集中字號常量就可以，不用每次去針對具體樣式做字號調整。

@media screen and (max-width:321px){

.m-navlist{font-size:15px}

}

@media screen and (min-width:321px) and (max-width:400px){

.m-navlist{font-size:16px}

}

@media screen and (min-width:400px){

.m-navlist{font-size:18px}

}

//設置基本的字號,基本元素取材除100即可得到rem的大小，當然也可以用16px換算改變根字號為6.25rem即可。因為還有很大比例的手機設計為320的，所以這里考慮為640的。當屏幕大于640的時候，不再放大，讓頁面處于水平居中640px顯示。

function fontAuto(){

var deviceWidth = document.documentElement.clientWidth;

if(deviceWidth > 640) deviceWidth = 640;

document.documentElement.style.fontSize = deviceWidth / 6.4 + 'px';

}

fontAuto();

window.onresize=function(){

fontAuto();

}

阿里rem布局
淘寶的效果跟網易的效果其實是類似的，隨著分辨率的變化，頁面元素的尺寸和間距都相應變化，這是因為淘寶的尺寸也是使用了rem的原因。在介紹它的做法之前，先來了解一點關于viewport的知識，通常我們采用如下代碼設置viewport。

<metaname="viewport"content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">這樣整個網頁在設備內顯示時的頁面寬度就會等于設備邏輯像素大小，也就是device-width。這個device-width的計算公式為：設備的物理分辨率/(devicePixelRatio * scale)，在scale為1的情況下，device-width = 設備的物理分辨率/devicePixelRatio 。devicePixelRatio稱為設備像素比，每款設備的devicePixelRatio都是已知，并且不變的，目前高清屏，普遍都是2，不過還有更高的，比如2.5, 3 等，魅族note的手機還有6p的devicePixelRatio就是3。淘寶觸屏版布局的前提就是viewport的scale根據devicePixelRatio動態設置。js中可以通過devicePixelRatio拿到具體的設備數值。

1. 動態設置viewport的scale

var scale = 1 / devicePixelRatio;

document.querySelector('meta[name="viewport"]').setAttribute('content','initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no');

2.動態設置font-size

document.documentElement.style.fontSize=document.documentElement.clientWidth/10+'px';（3）布局的時候，各元素的css尺寸=設計稿標注尺寸/設計稿橫向分辨率/10 （4）font-size可能需要額外的媒介查詢，并且font-size不使用rem，這一點跟網易是一樣的。

備注：你也可以通過阿里的現成的解決方案去實現，然后在預處理器中去處理px單位的字號<scriptsrc="http://g.tbcdn.cn/mtb/lib-flexible/{{version}}/??flexible_css.js,flexible.js"

以上就是創新互聯為大家帶來的關于成都網站開發中常見的rem布局的相關介紹，希望能夠幫助大家，在日后的開發中幫助到大家。

分享文章：成都網站開發中常見的rem布局
文章出自：http://m.newbst.com/news32/319082.html

成都網站建設公司_創新互聯，為您提供網站收錄、靜態網站、網站設計公司、營銷型網站建設、網站維護、關鍵詞優化

廣告

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯