移動端頁面自適應解決方案 rem 布局篇

2022-05-06 15:00:10 字數 3147 閱讀 8603

，了解一下視口。

假設我們的設計稿尺寸為750 * 1340。html5設計稿尺寸以及前端與設計之間協作流程一般分為下面兩種。

引入：頁面開頭處引入下面這段**，用於動態計算font-size

(function(doc, win) 


// 乘以100，px : rem = 100 : 1


docel.style.fontsize = 100 * (width / 750) + 'px';


};if (!doc.addeventlistener) return;


win.addeventlistener(resizeevt, recalc, false);


doc.addeventlistener('domcontentloaded', recalc, false);


})(document, window);


//或者


(function(doc, win)  else


};if (!doc.addeventlistener) 


win.addeventlistener(resizeevt, recalc, false);


doc.addeventlistener('domcontentloaded', recalc, false);


})(document, window);
css使用：

未引入前

body
引入後：除以100並將px換成rem

body
換算的依據是

// 乘以100，px : rem = 100 : 1


var recalc = function() 


// 乘以100，px : rem = 100 : 1


docel.style.fontsize = 100 * (width / 750) + 'px';


};
引入：頁面開頭處引入下面這段**，用於動態計算font-size，或者單獨放入乙個檔案，引入檔案也可以

(function(win, lib) );


if (metael) 


} else if (flexibleel) 


if (maximumdpr) }}


if (!dpr && !scale)  else if (devicepixelratio >= 2 && (!dpr || dpr >= 2))  else 


} else 


scale = 1 / dpr;


}docel.setattribute('data-dpr', dpr);


if (!metael)  else 


}function refreshrem() 


var rem = width / 10;


docel.style.fontsize = rem + 'px';


flexible.rem = win.rem = rem;


}win.addeventlistener('resize', function() , false);


win.addeventlistener('pageshow', function(e) 


}, false);


if (doc.readystate === 'complete')  else , false);


}refreshrem();


flexible.dpr = win.dpr = dpr;


flexible.refreshrem = refreshrem;


flexible.rem2px = function(d) 


return val;


}flexible.px2rem = function(d) 


return val;


}})(window, window['lib'] || (window['lib'] = {}));
css使用：

未引入前

body
引入後

@font-size-base: 75;


body
換算依據：

function refreshrem() 


var rem = width / 10;


docel.style.fontsize = rem + 'px';


flexible.rem = win.rem = rem;


}
這邊是用的less，如果您沒有用less，就需要手動計算，當然也可以轉化為px : rem = 100 : 1。 如果想轉化為px : rem = 100 : 1，可以修改上面的refreshrem函式：

function refreshrem() 


var rem = 100 * (width / 750)


docel.style.fontsize = rem + 'px'


flexible.rem = win.rem = rem;


}
未引入前

body
引入後：除以100並將px換成rem

body
換算依據就是上面修改的**：

function refreshrem() 


var rem = 100 * (width / 750)


docel.style.fontsize = rem + 'px'


flexible.rem = win.rem = rem;


}
1rem等於html根元素設定的font-size的px值

const base_size = 100 // 基準大小


const device_width = 750 // 裝置寬度


// 設定 rem 函式


const setrem = () =>  else 


}// 初始化


setrem()


// 改變視窗大小時重新設定 rem


window.onresize = setrem

移動端頁面自適應解決方案 rem布局

相信很多剛開始寫移動端頁面的同志們都要面對頁面自適應的問題，當然解決方案很多，比如 百分比布局，彈性布局flex 什麼是flex 也都能獲得不錯的效果，這裡主要介紹的是本人在實踐中用的最順手最簡單的布局方案 rem 什麼是rem 布局 rem布局非常簡單，首頁你只需在頁面引入這段原生js 就可以了 ...

手機端頁面自適應解決方案 rem布局

只需在頁面引入這段原生js 就可以了 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 function doc,win else if doc.addeventlistener return win.addeventlistener resizeevt,recal...

手機端頁面自適應解決方案 rem布局

相信很多剛開始寫移動端頁面的同學都要面對頁面自適應的問題，當然解決方案很多，比如 百分比布局，彈性布局flex 什麼是flex 也都能獲得不錯的效果，這裡主要介紹的是本人在實踐中用的最順手最簡單的布局方案 rem 什麼是rem 布局 rem布局非常簡單，首頁你只需在頁面引入這段原生js 就可以了 f...