一、為什么要做適配
- 為了適應各種移動端設備，完美呈現應有的布局效果
- 各個移動端設備，分辨率大小不一致，網頁想鋪滿整個屏幕，并在各種分辨下等比縮放
二、適配方案
- 固定高度，寬度百分比適配-布局非常均勻，適合百分比布局
- 固定寬度，改變縮放比例適配-什么情況都可以
-
Rem適配 - 像素比適配
三、單位
-
em根據元素自身的字體大小計算,元素自身16px1em=16px -
RemR -> root根節點(html) 根據html的字體大小計算其他元素尺寸
四、百分比適配(常用)
固定高度，寬度百分比適配
- 根據設置的大小去設置高度，單位可以用
px百分比auto - 常用
Flex布局 - 百分比寬度
以
640設計稿為例，在外層容器上設置最大以及最小的寬
#wrapper {
max-width: 640px; /*設置設計稿的寬度*/
min-width: 300px;
margin: 0 auto;
}
后面的區塊布局都用百分比，具體元素大小用
px計算
- 也就是寬度用百分比，高度用
px - 高度以及圖片不要定死，讓它自動撐開
五、Rem適配(常用)
根據屏幕的分辨率動態設置
html的文字大小，達到等比縮放的功能保證
html最終算出來的字體大小，不能小于12px在不同的移動端顯示不同的元素比例效果
如果
html的font-size:20px的時候，那么此時的1rem = 20px把設計圖的寬度分成多少分之一，根據實際情況
rem做盒子的寬度，viewport縮放
head加入常見的meta屬性
<meta name="format-detection" content="telephone=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<!--這個是關鍵-->
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0，minimum-scale=1.0">
把這段代碼加入
head中的script預先加載
// rem適配用這段代碼動態計算html的font-size大小
(function(win) {
var docEl = win.document.documentElement;
var timer = '';
function changeRem() {
var width = docEl.getBoundingClientRect().width;
if (width > 750) { // 750是設計稿大小
width = 750;
}
var fontS = width / 10; // 把設備寬度十等分 1rem=10px
docEl.style.fontSize = fontS + "px";
}
win.addEventListener("resize", function() {
clearTimeout(timer);
timer = setTimeout(changeRem, 30);
}, false);
win.addEventListener("pageshow", function(e) {
if (e.persisted) { //清除緩存
clearTimeout(timer);
timer = setTimeout(changeRem, 30);
}
}, false);
changeRem();
})(window)
- 或者使用淘寶提供的庫 https://github.com/amfe/lib-flexible
布局細節
- 結構用
section區塊劃分更語義化 - 然后在
body設置寬度
body {
width: 10rem;
margin: auto;
}
后面的區塊都以百分比布局
<div class="wrapper">
<header><header>
<section><section>
<section><section>
<section><section>
<section><section>
</div>
section,
header {
width: 100%;
}
把視覺稿中的 px 轉換成 rem
首先，目前日常工作當中，視覺設計師給到前端開發人員手中的視覺稿尺寸一般是基于
640px、750px以及1125px寬度為準。甚至為什么？大家應該懂的（考慮Retina屏）
假定設計稿的大小為
750，那么我們則將整個圖分成10等份來看。<html>對應的font-size為75px
html{
font-size: 75px;
}
- 這樣一來，對于視覺稿上的元素尺寸換算，只需要原始的
px值 除以rem基準值 即可
那么，我們現在就可以比對設計稿，比如設計稿中，有一個
div元素，寬度，高度都為20px,那么我們這樣寫即可（可以用markman標準設計稿的元素大小）
div {
height: 0.27rem; /*20/75*/
width: 0.27rem;
}
- 動態計算的
rem最后會幫我們動態計算元素在不同屏幕下的寬高 - 對于設計稿上的每個元素的尺寸在設計稿大小已知的時候，我們需要測量出，然后在用測量的寬高除以設計稿
750的十分之一也就是75,得到我們想要的rem。而rem是根據屏幕動態變化的，也就達到了適配的效果。也就是同一套設計稿運用在不同的設備上。
比如當我們切換到
320設備大小的時候，這時候1rem=32px;div的像素實際是0.27*32=8.64px0.27是我們在已知設計稿是750的情況下計算出來的，rem用來動態計算而已
- 對于
marginpaddingline-heightwidthheight使用rem計算
如何快速計算
在實際生產當中，如果每一次計算
px轉換rem，或許會覺得非常麻煩
-
CSSREM是一個CSS的px值轉rem值的Sublime Text3自動完成插件 - 插件效果
[圖片上傳失敗...(image-4f244b-1545535128364)]
插件使用方法
-
安裝
- 下載本項目，比如：git clone https://github.com/flashlizi/cssrem
- 進入
packages目錄：Sublime Text->Preferences->Browse Packages... - 復制下載的
cssrem目錄到剛才的packges目錄里。 - 重啟
Sublime Text
-
配置參數
- 參數配置文件：
Sublime Text -> Preferences -> Package Settings -> cssrem
-
px_to_rem-px轉rem的單位比例，默認為40【根據設計稿來設置，如設計稿750，我們取十分之一即75】。 -
max_rem_fraction_length-px轉rem的小數部分的最大長度。默認為6。 -
available_file_types- 啟用此插件的文件類型。默認為：[".css", ".less", ".sass"]。
- 參數配置文件：
文字適配的解決方案
- 對于一些標題性的文字，我們依然可以用
rem。讓他隨著屏幕來進行縮放，因為標題性文字一般較大，而較大的文字，點陣對其影響就越小。這樣，即使出現奇怪的尺寸，也能夠讓字體得到很好的渲染。 - 對于一些正文內容的文字（即站在使用者的角度，你不希望他進行縮放的文字）。我們采用
px來進行處理
六、縮放比適配
固定寬度，改變縮放比例適配
- 設計圖的寬度就是網頁顯示的寬度
- 改變視口的縮放比例
- 頁面寬度固定死
// 縮放比例適配方案--用這個代碼
var width = window.screen.width,
fixedW = 320, //設計稿寬度的一半
scale = width / fixedW, // 縮放比例
meta = document.createElement('meta'),
metaAttr = {
name : 'viewport',
content : 'width='+fixedW+', initial-scale='+scale+', maximum-scale='+scale+', user-scalable=0'
};
for (var key in metaAttr) {
meta[key] = metaAttr[key];
}
document.head.appendChild(meta);
七、像素比適配
window.devicePixelRatio- 物理像素是手機屏幕分辨率
- 獨立像素 指
css像素 屏幕寬度 - 像素比 = 物理像素 /
css寬度 - 獲取設備的像素比
window.devicePixelRatio
八、小結
關于移動端布局方案有很多，
rem和百分比運用最多的
相關文章閱讀
