最近有學生問我移動端的自適應布局，整理了一下資料，正好發上來當個博文。
目標rem
the fontsize of the root element
rem 表示的是頁面根元素 html 的字型大小，它是css的屬性，你可以直接使用，瀏覽器中預設字型大小為16px，因此 1rem = 16px
header自適應自適應應該包含兩個方面的內容
多終端自適應（安卓，ios，ipad…）
橫屏自適應（移動端橫屏顯示）
針對多端自適應，我比較贊同手淘的方案，即在不同大小的螢幕中，對頁面元素進行相應的放大或者縮小來實現自適應
針對橫屏顯示，我比較傾向於大眾點評的方案
可以看到，手淘在橫屏的時候也進行了同比放大，在高度只有375的螢幕中體驗不是很好，相比之下大眾點評更加清爽一點
但是大眾點評這一部分是通過 flex+百分比來實現的，並沒有用到rem
rem如何自適應
了解了自適應的需求，如何使用 rem 來達到呢？
其實只需要一段 js **，以設計稿 750*1334 為例：
var docel = document.documentelement,
clientwidth = math.min(docel.clientwidth,docel.clientheight);// 始終以螢幕的最短邊進行計算，保證橫屏和豎屏 html 字型大小不變
docel.style.fontsize = clientwidth / 7.5 + 'px';
headerrem 實現自適應的核心**就是這樣簡單，但是偶爾也有不靈的時候
高清屏問題
有時候，ui小姐姐會不假辭色的指出你有些地方不行，不是她想要的那樣，比如：
雖然，你努力的給她解釋這是1px，1px，真的是1px啊，她還是認為太粗了，她可能想要這樣的：
雖然在這裡我努力的幫你復現，但是由於瀏覽器並不是真正的高清屏，所以這裡只是用來說明問題
這個問題可以這樣來解釋（下面以橫向範圍來解釋）
想像一下，非高清屏中，375的螢幕裡有375個豎向的條紋，每乙個條紋都是物理能夠達到的顯示的最小單元，這是裝置上的概念。在下面這個圖中，每乙個黑條和每乙個白條，都可以理解為1個裝置畫素
而我們css中使用的1px，我們習慣稱為邏輯畫素，在非高畫質螢幕中，邏輯畫素和裝置畫素是1：1的關係，所以這時候你畫乙個1px的邊框，就會看到
但是隨著高清屏的出現，雖然螢幕寬度還是375，（以iphone6為例），但是裝置畫素卻提高了一倍，變成了750，因為邏輯畫素不變，所以邏輯畫素和裝置畫素是1：2的關係，這時候你畫乙個1px的邊框，就會看到和上面一樣的圖。
這就是為什麼ui小姐姐總是跑來找你，作為ui，她們的電腦基本都是mac這種高清屏，加上自己的專業，看設計稿和頁面絕對不超過1px的誤差，實際上她們想看的是這樣的
解決如何俘虜ui小姐姐芳心呢？直接上**，莫廢話
var docel = document.documentelement,
px = window.devicepixelratio, //裝置畫素比，邏輯畫素與裝置畫素的比值
clientwidth = math.min(window.screen.width,window.screen.height);
//防止頁面縮放帶來的影響，將布局的基準值（rem）放大
docel.style.fontsize = px * clientwidth / 7.5 + 'px';
var meta = document.queryselector('meta[name="viewport"]')
meta.content = meta.content.replace(/1/,1/px) //讓頁面按裝置畫素比進行縮放
一般我們在使用 rem 的時候，會順便檢測螢幕的橫屏事件 『orientationchange』，為了防止其他人的**帶來的影響，我們將我們的**放入閉包函式中
(function(doc, win) ;
if (doc.addeventlistener) else
var meta = document.queryselector('meta[name="viewport"]')
meta.content = meta.content.replace(/1/g,1/px)
})(document, window);
所以在布局的時候，計算也很方便，比如乙個元素寬度為300px，那麼就是 300/100 = 3rem，對於字型、都適用。
最後附上乙個自己修改的頁面
JS PC端設定rem 移動端設定rem
window.onresize function 頁面剛重新整理時呼叫 init function init const basesize 32function setrem 初始化 setrem window.onresize function 這裡是乙個pc和h5的 rem樣式 寫在了乙個htm...
移動端rem使用
1 移動端設計圖750時，html font size 50px。使用方法 1 新增viewport。2 在頁面最裡面引入該段js 建議在head裡面引入 3 css 的編寫，設計圖為750px時，頁面標註大小除以100即可，例如 設計圖標註的是，寬300px,高300px。使用rem就是，widt...
移動端rem布局
時隔半年，再次回顧移動端開發，感覺自己又張知識了 我們平常用的較多的單位是px,百分比，rem,em,vw,vh，但是在移動端用的比較多的還是rem，但是他在用的過程中要注意什麼呢，怎麼用呢，下面就開始啦。他是乙個度量單位，可以用他作為高寬，字型的單位。他以html中設定font size的大小為基...