題外話
突然被要求教學(xué)妹怎么做移動(dòng)端適配的問題，上一次我寫移動(dòng)端的東西過去好久了灯抛，于是又面向百度了一波，網(wǎng)上感覺還是零零散散的音瓷，于是決定整理下來牧愁，雖有拾人牙慧之嫌，但是總歸會(huì)清晰省事不少外莲，嘻猪半！(我真是個(gè)暖心學(xué)長(zhǎng))
Ps：
解決方案概括在最下面"總結(jié)"中兔朦，上面的都是詳細(xì)解釋，不想看長(zhǎng)篇大論者可以直接拖到最下面看解決方案
設(shè)置html中meta標(biāo)簽
首先在移動(dòng)端開發(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ī)界面來看摆舟，理想視口是375px寬
那么問題來了，上面三個(gè)塊寬度加起來為300px,卻不到iPhone375px寬的一半邓了，為什么?
因?yàn)橛行┢聊缓苄〉闹悄苁謾C(jī)恨诱，但分辯率卻可以做得很大，傳統(tǒng)桌面網(wǎng)站直接放到手機(jī)上閱讀時(shí)骗炉，同時(shí)該網(wǎng)站沒有做移動(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)試也沒有問題厕鹃，它會(huì)直接根據(jù)理想視圖等參數(shù)顯示出來，但是谷歌瀏覽器就不會(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:用戶是否可以通過他的手勢(shì)來縮放整個(gè)應(yīng)用程序剂碴，使應(yīng)用程序的尺度發(fā)生一個(gè)改變（yes/no）
當(dāng)然，在<meta name="viewport" ……>的背后關(guān)于視圖及其屬性轻专，如布局視圖忆矛，視覺視圖，理想視圖……可以參考這篇博客: 深入理解viewport及相關(guān)屬性的關(guān)系
適配不同機(jī)型请垛，設(shè)置rem單位長(zhǎng)度
一般由于移動(dòng)端各個(gè)不同型號(hào)手機(jī)其寬度不同
所以如果采用px固定住元素:比如你定義了一個(gè)div催训，里面定義了很多子元素，然后在iPhone6瀏覽器頁面上面顯示剛好是一行叼屠，但是一到iPhone5上各元素就突然換行了瞳腌，亂成了一只皮皮蝦
這是因?yàn)閕Phone6的手機(jī)寬度是750px,iPhone5的寬度是640px,所以把一個(gè)750px的東西塞進(jìn)640px寬的容器中肯定會(huì)出問題
(當(dāng)年本人在實(shí)習(xí)做移動(dòng)端頁面開發(fā)的時(shí)候绞铃，每每切換到iPhone5總是一陣慌張镜雨，因?yàn)檫@個(gè)它頁面寬度太小了，就很有可能會(huì)出現(xiàn)排版混亂的問題)
什么?你說Chrome devTools中顯示的iPhone6寬度是375px,iPhone5寬度是320px,這就是另一個(gè)問題了儿捧，這牽扯到了css邏輯像素和手機(jī)物理像素的比例問題了荚坞，也就是關(guān)于DPR的問題：移動(dòng)web開發(fā)之像素和DPR詳解，可以點(diǎn)擊這篇博客了解學(xué)習(xí)
人家珠玉在前菲盾，我也就不再長(zhǎng)篇累牘地解釋了
所以為了解決移動(dòng)端頁面寬高標(biāo)準(zhǔ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)頁面寬度 - 那么唱星，什么時(shí)候使用rem布局呢?
根據(jù)大佬們的思想雳旅，寬度小于頁面50%可以使用rem布局，再大就用百分比布局
因?yàn)閞em不是萬能的间聊，當(dāng)子元素在父元素中的寬度占比很大時(shí)攒盈，使用rem，當(dāng)切換設(shè)備時(shí)候也有可能會(huì)出現(xiàn)排版混亂的情況 - 那么怎么設(shè)置改變根元素的
font-size屬性大小從而改變r(jià)em大小來適配不同機(jī)型呢甸饱？
這里有兩種方案:
- 通過媒體查詢來改變
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í)際需求改變沦童，并不唯一
- 通過js動(dòng)態(tài)改變
font-size,進(jìn)而改變r(jià)em
當(dāng)頁面一加載的時(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)聽橫豎屏切換
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)端適配的問題热凹，當(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ù)頁面寬度設(shè)置 font-size 從而改變r(jià)em,使得頁面元素做到最大自適應(yīng)碟渺，代碼已經(jīng)貼在上面了 (*′?`)skr~
