一、為什么要做適配
- 為了適應各種移動端設備李滴，完美呈現(xiàn)應有的布局效果
- 各個移動端設備，分辨率大小不一致，網(wǎng)頁想鋪滿整個屏幕唐全，并在各種分辨下等比縮放
二、適配方案
- 固定高度，寬度百分比適配-布局非常均勻盯荤，適合百分比布局
- 固定寬度，改變縮放比例適配-什么情況都可以
-
Rem適配 - 像素比適配
三焕盟、單位
-
em根據(jù)元素自身的字體大小計算,元素自身16px1em=16px -
RemR -> root根節(jié)點(html) 根據(jù)html的字體大小計算其他元素尺寸
四秋秤、百分比適配(常用)
固定高度，寬度百分比適配
- 根據(jù)設置的大小去設置高度脚翘，單位可以用
px百分比auto - 常用
Flex布局 - 百分比寬度
以
640設計稿為例灼卢，在外層容器上設置最大以及最小的寬
#wrapper {
max-width: 640px; /*設置設計稿的寬度*/
min-width: 300px;
margin: 0 auto;
}
后面的區(qū)塊布局都用百分比，具體元素大小用
px計算
- 也就是寬度用百分比来农，高度用
px - 高度以及圖片不要定死鞋真，讓它自動撐開
五、Rem適配(常用)
根據(jù)屏幕的分辨率動態(tài)設置
html的文字大小沃于，達到等比縮放的功能保證
html最終算出來的字體大小涩咖，不能小于12px在不同的移動端顯示不同的元素比例效果
如果
html的font-size:20px的時候赶袄，那么此時的1rem = 20px把設計圖的寬度分成多少分之一，根據(jù)實際情況
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適配用這段代碼動態(tài)計算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
布局細節(jié)
- 結構用
section區(qū)塊劃分更語義化 - 然后在
body設置寬度
body {
width: 10rem;
margin: auto;
}
后面的區(qū)塊都以百分比布局
<div class="wrapper">
<header><header>
<section><section>
<section><section>
<section><section>
<section><section>
</div>
section,
header {
width: 100%;
}
把視覺稿中的 px 轉(zhuǎn)換成 rem
首先蒋困，目前日常工作當中盾似，視覺設計師給到前端開發(fā)人員手中的視覺稿尺寸一般是基于
640px、750px以及1125px寬度為準雪标。甚至為什么零院？大家應該懂的（考慮Retina屏）
假定設計稿的大小為
750，那么我們則將整個圖分成10等份來看村刨。<html>對應的font-size為75px
html{
font-size: 75px;
}
- 這樣一來告抄，對于視覺稿上的元素尺寸換算，只需要原始的
px值 除以rem基準值 即可
那么嵌牺，我們現(xiàn)在就可以比對設計稿打洼，比如設計稿中，有一個
div元素逆粹，寬度募疮，高度都為20px,那么我們這樣寫即可（可以用markman標準設計稿的元素大小）
div {
height: 0.27rem; /*20/75*/
width: 0.27rem;
}
- 動態(tài)計算的
rem最后會幫我們動態(tài)計算元素在不同屏幕下的寬高 - 對于設計稿上的每個元素的尺寸在設計稿大小已知的時候僻弹，我們需要測量出阿浓，然后在用測量的寬高除以設計稿
750的十分之一也就是75,得到我們想要的rem。而rem是根據(jù)屏幕動態(tài)變化的蹋绽，也就達到了適配的效果芭毙。也就是同一套設計稿運用在不同的設備上。
比如當我們切換到
320設備大小的時候卸耘，這時候1rem=32px;div的像素實際是0.27*32=8.64px0.27是我們在已知設計稿是750的情況下計算出來的退敦，rem用來動態(tài)計算而已
- 對于
marginpaddingline-heightwidthheight使用rem計算
如何快速計算
在實際生產(chǎn)當中，如果每一次計算
px轉(zhuǎn)換rem鹊奖，或許會覺得非常麻煩
-
CSSREM是一個CSS的px值轉(zhuǎn)rem值的Sublime Text3自動完成插件 - 插件效果
[圖片上傳失敗...(image-4f244b-1545535128364)]
插件使用方法
-
安裝
- 下載本項目苛聘，比如：git clone https://github.com/flashlizi/cssrem
- 進入
packages目錄：Sublime Text->Preferences->Browse Packages... - 復制下載的
cssrem目錄到剛才的packges目錄里。 - 重啟
Sublime Text
-
配置參數(shù)
- 參數(shù)配置文件：
Sublime Text -> Preferences -> Package Settings -> cssrem
-
px_to_rem-px轉(zhuǎn)rem的單位比例忠聚，默認為40【根據(jù)設計稿來設置设哗，如設計稿750，我們?nèi)∈种患?code>75】两蟀。 -
max_rem_fraction_length-px轉(zhuǎn)rem的小數(shù)部分的最大長度网梢。默認為6。 -
available_file_types- 啟用此插件的文件類型赂毯。默認為：[".css", ".less", ".sass"]战虏。
- 參數(shù)配置文件：
文字適配的解決方案
- 對于一些標題性的文字拣宰，我們依然可以用
rem。讓他隨著屏幕來進行縮放烦感，因為標題性文字一般較大巡社，而較大的文字，點陣對其影響就越小手趣。這樣晌该，即使出現(xiàn)奇怪的尺寸，也能夠讓字體得到很好的渲染绿渣。 - 對于一些正文內(nèi)容的文字（即站在使用者的角度朝群，你不希望他進行縮放的文字）。我們采用
px來進行處理
六中符、縮放比適配
固定寬度姜胖，改變縮放比例適配
- 設計圖的寬度就是網(wǎng)頁顯示的寬度
- 改變視口的縮放比例
- 頁面寬度固定死
// 縮放比例適配方案--用這個代碼
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和百分比運用最多的
相關文章閱讀
