題外話
突然被要求教學(xué)妹怎么做移動(dòng)端適配的問(wèn)題，上一次我寫(xiě)移動(dòng)端的東西過(guò)去好久了，于是又面向百度了一波，網(wǎng)上感覺(jué)還是零零散散的，于是決定整理下來(lái)，雖有拾人牙慧之嫌，但是總歸會(huì)清晰省事不少，嘻！(我真是個(gè)暖心學(xué)長(zhǎng))
Ps：
解決方案概括在最下面"總結(jié)"中，上面的都是詳細(xì)解釋，不想看長(zhǎng)篇大論者可以直接拖到最下面看解決方案
設(shè)置html中meta標(biāo)簽
首先在移動(dòng)端開(kāi)發(fā)中，需要在前端html的<head></head>標(biāo)簽中加入
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=10.0,user-scalable=no">
viewport是專為手機(jī)瀏覽器設(shè)計(jì)的一個(gè)meta標(biāo)簽
先看看如果html代碼不用這個(gè)meta標(biāo)簽的情況下:
css代碼跟面條一樣長(zhǎng)，就不貼了，簡(jiǎn)述一下：上面的三塊每塊100px寬，下面的是100%寬
但是由調(diào)試的iPhone手機(jī)界面來(lái)看，理想視口是375px寬
那么問(wèn)題來(lái)了，上面三個(gè)塊寬度加起來(lái)為300px,卻不到iPhone375px寬的一半，為什么?
因?yàn)橛行┢聊缓苄〉闹悄苁謾C(jī)，但分辯率卻可以做得很大，傳統(tǒng)桌面網(wǎng)站直接放到手機(jī)上閱讀時(shí)，同時(shí)該網(wǎng)站沒(méi)有做移動(dòng)端優(yōu)化的網(wǎng)站時(shí)，瀏覽器會(huì)盡可能縮小這個(gè)網(wǎng)站讓用戶看到網(wǎng)站的全部?jī)?nèi)容
所以前端html需要加上meta標(biāo)簽，加上后:
然后用Chrome devTools可以發(fā)現(xiàn)下面的100%寬度的div就是375px了，nice!
(弱弱吐槽一句:html代碼不加這個(gè)meta標(biāo)簽在火狐瀏覽器中調(diào)試也沒(méi)有問(wèn)題，它會(huì)直接根據(jù)理想視圖等參數(shù)顯示出來(lái)，但是谷歌瀏覽器就不會(huì)……)
meta中content參數(shù):
- width = device-width:應(yīng)用程序的寬度和屏幕的寬度是一樣的,也可定死，可以自定義試試看效果
- height = device-height:應(yīng)用程序的高度和屏幕的高是一樣的
- initial-scale = 1.0:應(yīng)用程序啟動(dòng)時(shí)候的縮放尺度（1.0表示不縮放）
- minimum-scale = 1.0:用戶可以縮放到的最小尺度（1.0表示不縮放）
- maximum-scale = 1.0:用戶可以放大到的最大尺度（1.0表示不縮放）
- user-scalable = no:用戶是否可以通過(guò)他的手勢(shì)來(lái)縮放整個(gè)應(yīng)用程序，使應(yīng)用程序的尺度發(fā)生一個(gè)改變（yes/no）
當(dāng)然，在<meta name="viewport" ……>的背后關(guān)于視圖及其屬性，如布局視圖，視覺(jué)視圖，理想視圖……可以參考這篇博客: 深入理解viewport及相關(guān)屬性的關(guān)系
適配不同機(jī)型，設(shè)置rem單位長(zhǎng)度
一般由于移動(dòng)端各個(gè)不同型號(hào)手機(jī)其寬度不同
所以如果采用px固定住元素:比如你定義了一個(gè)div，里面定義了很多子元素，然后在iPhone6瀏覽器頁(yè)面上面顯示剛好是一行，但是一到iPhone5上各元素就突然換行了，亂成了一只皮皮蝦
這是因?yàn)閕Phone6的手機(jī)寬度是750px,iPhone5的寬度是640px,所以把一個(gè)750px的東西塞進(jìn)640px寬的容器中肯定會(huì)出問(wèn)題
(當(dāng)年本人在實(shí)習(xí)做移動(dòng)端頁(yè)面開(kāi)發(fā)的時(shí)候，每每切換到iPhone5總是一陣慌張，因?yàn)檫@個(gè)它頁(yè)面寬度太小了，就很有可能會(huì)出現(xiàn)排版混亂的問(wèn)題)
什么?你說(shuō)Chrome devTools中顯示的iPhone6寬度是375px,iPhone5寬度是320px,這就是另一個(gè)問(wèn)題了，這牽扯到了css邏輯像素和手機(jī)物理像素的比例問(wèn)題了，也就是關(guān)于DPR的問(wèn)題：移動(dòng)web開(kāi)發(fā)之像素和DPR詳解，可以點(diǎn)擊這篇博客了解學(xué)習(xí)
人家珠玉在前，我也就不再長(zhǎng)篇累牘地解釋了
所以為了解決移動(dòng)端頁(yè)面寬高標(biāo)準(zhǔn)繁多的問(wèn)題,就有這么一個(gè)解決思想:
整體布局可以采用百分比、flex布局，一些設(shè)計(jì)圖上固定長(zhǎng)度的元素，如按鈕等可以使用rem布局
- 什么是rem呢?
rem：root em，這是一個(gè)相對(duì)單位，相對(duì)于HTML根元素font-size屬性大小決定其大小
舉個(gè)例子:在css樣式中設(shè)置html{font-size:20px}那么 1rem=20px,所以當(dāng)一個(gè)按鈕寬度為10px時(shí)，可以換算為width: 0.5rem - rem怎么做到適配的呢?
舉個(gè)例子:在iPhone6中定義html{font-size:40px}，然后設(shè)置一個(gè)按鈕為width: 0.5rem，這時(shí)候它的寬度是20px,然后你切換成iPhone5，在iPhone5中定義了html{font-size:30px}，于是這個(gè)按鈕寬度就變成了15px,因?yàn)閕Phone5的寬度比較小，所以這個(gè)按鈕寬度變小后在iPhone5中就不會(huì)撐出父元素
所以只要隨著設(shè)備的不同改變根元素的font-size屬性大小，就能讓所有以rem作為單位的元素自適應(yīng)頁(yè)面寬度 - 那么，什么時(shí)候使用rem布局呢?
根據(jù)大佬們的思想，寬度小于頁(yè)面50%可以使用rem布局，再大就用百分比布局
因?yàn)閞em不是萬(wàn)能的，當(dāng)子元素在父元素中的寬度占比很大時(shí)，使用rem，當(dāng)切換設(shè)備時(shí)候也有可能會(huì)出現(xiàn)排版混亂的情況 - 那么怎么設(shè)置改變根元素的
font-size屬性大小從而改變r(jià)em大小來(lái)適配不同機(jī)型呢？
這里有兩種方案:
- 通過(guò)媒體查詢來(lái)改變
font-size,進(jìn)而改變r(jià)em
舉個(gè)例子:
html {
font-size: 62.5%
}
@media only screen and (min-width: 481px) { //當(dāng)屏幕寬度小于481px
html {
font-size:94%!important
}
}
@media only screen and (min-width: 561px) { //當(dāng)屏幕寬度小于561px
html {
font-size:109%!important
}
}
@media only screen and (min-width: 641px) { //當(dāng)屏幕寬度小于641px
html {
font-size:125%!important
}
body {
max-width: 640px
}
}
這些屏幕最小寬度參數(shù)和 font-size 都是根據(jù)項(xiàng)目實(shí)際需求改變，并不唯一
- 通過(guò)js動(dòng)態(tài)改變
font-size,進(jìn)而改變r(jià)em
當(dāng)頁(yè)面一加載的時(shí)候，js就獲取當(dāng)前設(shè)備的寬度，進(jìn)而設(shè)置font-size
<script>
function refreshRem() {
var d= document.documentElement;
var width =d.getBoundingClientRect().width; //獲取當(dāng)前設(shè)備的寬度
if (width > 640 ){ // 640不固定，根據(jù)設(shè)計(jì)稿的寬度定
width = 640;
}
rem = width / 6.4;
console.log(rem);
d.style.fontSize = rem + "px"
}
refreshRem();
window.addEventListener("resize", function() { //監(jiān)聽(tīng)橫豎屏切換
refreshRem()
}, false);
</script>
這個(gè)script代碼可以直接粘貼到html <body></body> 標(biāo)簽的后面，直接可以使用
640這個(gè)寬度參數(shù)可以根據(jù)設(shè)計(jì)稿自定義，這里width取640，是根據(jù)iPhone5的寬度設(shè)置的，將devTools移動(dòng)設(shè)備切換到iPhone5可以看到1rem=50px
總結(jié)
關(guān)于移動(dòng)端適配的問(wèn)題，當(dāng)然還有其他的一些解決方案，像是淘寶，網(wǎng)易都有自己的解決方案，都比較好，也可以去搜搜且看看他們的解決思想
本文的移動(dòng)端適配解決思想:
- 先在html
<head></head>中設(shè)置meta標(biāo)簽:
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=10.0,user-scalable=no">
2.使用rem作為長(zhǎng)度單位， 利用css媒體查詢或者js動(dòng)態(tài)設(shè)置根據(jù)頁(yè)面寬度設(shè)置 font-size 從而改變r(jià)em,使得頁(yè)面元素做到最大自適應(yīng)，代碼已經(jīng)貼在上面了 (*′?`)skr~
