本人也是一個剛剛接觸前端的小蝦米，對於移動端這一塊更是一抹眼的黑，前端時間接手開始一個移動端的項目，在網上查詢了一下rem的作用，百度搜索下來全是介紹rem的作用原理的（rem是根據根元素計算的），然后基本上給我的就是
html{font-size：62.5%}
body{font-size：1.2rem}
移動端不同屏幕顯示的字體大小是有區別的，所以現在我都是配着以下js使用匹配不同的移動端設備屏幕。
function page() {
//通過navigator判斷是否是移動設備
if ((navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i))) {
//在移動端
(function (doc, win) {
// html
var docEl = doc.documentElement,
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize', recalc = function () {
var clientWidth = docEl.clientWidth;
if (!clientWidth) return;
clientWidth = (clientWidth > 768 ) ? 768 : clientWidth ; docEl.style.fontSize = 10 * (clientWidth / 375 ) + 'px'; //這個10可以根據自己使用的數據來調整
};
if (!doc.addEventListener) return; win.addEventListener(resizeEvt, recalc, false);
recalc();
})(document, window);
//移動端 文字適配
}
else { //如果是pc端我們可以像微信公眾號那樣，設置最大寬度為740px
// window.location.href="prompt.html"
document.documentElement.style.maxWidth=740+'px';
document.documentElement.style.margin="0 auto"
//PC端
}}
page();
使用時建議單獨建一個js包，要用直接引用就行，引入上面 的js代碼后（注意：將js包在頁面加載前邊引入），字體和高度使用rem作為單位，寬帶設為百分比，項目在不同的移動端設備就會自動適應屏幕啦