關於移動端布局

如今手機裝置多種多樣，螢幕大小各不相同，下面說一下如今的幾種移動端布局.

1. 寬度百分比布局 + px布局.

先說一下，這種布局雖然我現在沒有用，但是還是有見到過，這種布局如果你按照750設計圖來做的話其實在主流手機螢幕上展示都挺不錯的，但是如果螢幕非主流的話，那顯示出來的效果就很差了，所以這種布局不建議使用.

2. **查詢 + px布局

這種布局用的話還是可以的，但是**查詢畢竟也是在乙個區間內，而且不同的區間段應該寫多大的px呢？這也是乙個問題.

3. rem布局 + flex布局

ok，說到正題了，這是我現階段採用的布局，關於flex布局，強烈推薦阮一峰的關於flex布局這一章，或者菜鳥教程內的內容也可以，跟阮一峰的一樣。現在重點說一下rem布局.

rem布局的原理

首先說一下rem這個單位，rem這個單位是根據html的根字型來確定的，現在的瀏覽器預設的html根字型是16px，也就是1rem = 16px，你可以做一下實驗：

html

div

這樣最後div呈現出來的寬度其實是100px，知道了這個原理，那麼如果我們使用rem單位布局，然後根據手機螢幕大小改變html的根字型的大小，這樣不就實現了手機螢幕適配嗎？

如何動態改變html根字型的大小.

網上關於這類的js很多，我說一下我正在使用的js，感覺比較簡單而且容易理解:

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

一般設計稿都是按照750來給的，750也就是iphone6的設計稿，是實體手機寬度的2倍，所以上面的函式在iphone6上面設定的根字型其實是50px，那樣我們在寫css的時候，直接按照設計稿量出的px單位除以100，然後得出的值就是rem的值，關於rem轉換，sublime和vscode上面有css轉rem的外掛程式，然後也可以寫乙個scss的轉換函式來進行轉換:

@function
rem($px)

關於移動端布局

移動端布局

移動端布局

移動端布局

相關推薦