手機(jī)設(shè)備屏幕尺寸不一，做移動(dòng)端的Web頁面戒幔，需要考慮在安卓/IOS的各種尺寸設(shè)備上的兼容粒梦，所謂移動(dòng)端適配，就是在不同尺寸的手機(jī)設(shè)備上同辣，頁面“相對性的達(dá)到合理的展示（自適應(yīng)）”
主要從以下幾點(diǎn)入手：
1.百分比布局
目的是讓頁面能夠自適應(yīng)屏幕寬度而自動(dòng)調(diào)整大小拷姿。但是這是有缺陷的惭载，元素隨頁面大小放生改變的時(shí)候，會(huì)顯得極不協(xié)調(diào)與難看响巢。你無法基于寬度去設(shè)置一個(gè)高度描滔，所以高度不會(huì)因?yàn)槠聊粚挾鹊母淖兌M(jìn)行有比例的變化，高度和寬度無法做任何的配合踪古。
2.vm/vh
vw(view-width), vh(view-height)?這兩個(gè)單位是CSS新增的單位含长，表示視區(qū)寬度/高度，視區(qū)總寬度為100vw, 總高度為100vh伏穆。視區(qū)指瀏覽器內(nèi)部的可視區(qū)域大芯信ⅰ：window.innerWidth/Height
這兩個(gè)長度單位和百分比相似，我們可以通過這兩個(gè)長度屬性來讓頁面自適應(yīng)枕扫，但vw屬性的兼容性并不好陪腌。
3.媒體查詢
通過設(shè)置媒體查詢來更改頁面樣式，例如：
①烟瞧，@media max-width800px{css樣式}? ?--------------屏幕小于800px的時(shí)候顯示的css樣式
②诗鸭，<link rel="stylesheet"? type="text/css"? href="./mobile.css"? media="screen and (max-device-width: 500px)">? ? -------------------只在設(shè)備屏幕的寬度不大于500px的時(shí)候生效移入的css文件
ps：當(dāng)載入link標(biāo)簽的時(shí)候，路徑上的css文件已經(jīng)下載好了参滴，生效與否只取決于媒體查詢是否生效强岸，會(huì)動(dòng)態(tài)切換。
詳見：媒體查詢
采用媒體查詢的方法來做移動(dòng)端的適配也存在著一些問題砾赔，因?yàn)楸娝苤氤謾C(jī)的型號和樣式太多了，所以我們不能專門為每個(gè)型號的手機(jī)都單獨(dú)去做一個(gè)樣式过蹂，這樣不現(xiàn)實(shí)，而且上文也提到了通過百分比布局來控制頁面的伸縮也是存在著問題的聚至，如果想要做出一個(gè)比較好的適配方案就離不開下文所述的內(nèi)容
4.meta標(biāo)簽
手機(jī)在瀏覽網(wǎng)頁的時(shí)候酷勺，手機(jī)會(huì)模擬出與自身屏幕大小不符的分辨率來顯示頁面，這樣就會(huì)使得頁面顯示出現(xiàn)很多問題扳躬，比如我們原本做好了手機(jī)端的媒體查詢脆诉，在屏幕寬度小于450px的時(shí)候更改樣式，但由于它模擬出的分辨率大于450px贷币，這樣就會(huì)讓我們原本想要做出的樣式效果得不到展示击胜，會(huì)嚴(yán)重影響用戶體驗(yàn)。
上面這個(gè)meta標(biāo)簽的作用就是讓手機(jī)預(yù)覽頁面的時(shí)候就是實(shí)際屏幕寬度役纹，而且禁止其縮放偶摔，各種縮放比例都是1.
5.flex布局
flex布局對于屏幕適配也很有幫助，有些地方通過flex布局的實(shí)現(xiàn)方式促脉，效果會(huì)比較合理辰斋。因?yàn)閺椥院凶涌梢愿鶕?jù)視口大小做出調(diào)整策州，比如縮放，換行宫仗。詳見：flex布局
6.動(dòng)態(tài)rem够挂，手機(jī)專用的適配方案
可設(shè)想一下，如果頁面內(nèi)容能夠隨著不同的屏幕而進(jìn)行等比例縮放是不是就能很好的適配呢藕夫？在百分比布局中可以縮放但不能等比例孽糖，問題就在于高度不能基于寬度來設(shè)置，其實(shí)這個(gè)問題可以解決毅贮，下面就開始了解動(dòng)態(tài)rem办悟，手機(jī)專用的適配方案。
①嫩码，rem是一個(gè)長度單位誉尖，我們要知道，1rem等于HTML元素的font-size屬性值
②铸题，通過JS的全局屬性innerWidth來讀取頁面的可視寬度(一般在手機(jī)中就等于屏幕的寬度)
③铡恕，我們可以把HTML的font-size屬性對應(yīng)上innerWidth的值，比如這樣寫：
當(dāng)然你可以加減乘除innerWidth丢间，畢竟頁面寬度很大探熔，如果font-size=350px豈不是很不好操作
④，通過用JS更改HTML元素的font-size屬性值烘挫，rem的值也會(huì)隨之變化诀艰，屏幕越大，rem越大饮六，屏幕越小其垄，rem越小，接下來我們在給頁面內(nèi)容寫長度單位的時(shí)候就可以用rem卤橄，比如绿满，給一個(gè)元素的寬度為1rem，高度為0.5rem窟扑，那么這個(gè)元素就會(huì)隨著不同的屏幕而等比例縮放喇颁，比例就是2:1
?PS:chrome瀏覽器默認(rèn)設(shè)置能顯示的最小字體是12px,也就是說如果給css樣式小于12px,那么還會(huì)顯示12px.這需要手動(dòng)設(shè)置才行.但瀏覽器用戶一般都不會(huì)去設(shè)置這個(gè).所以讓字體不要小于12像素,否則chrome瀏覽器沒法顯示。
當(dāng)我們拿到設(shè)計(jì)稿寫頁面的時(shí)候嚎货，不可能去把所有的px長度計(jì)算成rem橘霎，這樣太過于麻煩且效率低下，所以必須學(xué)會(huì)SCSS殖属，讓SCSS把我們自動(dòng)把px換算成rem姐叁。
SCSS中使用下面的函數(shù)即可計(jì)算了：
? ??????????????????@function px( $px ){
?? ???????????????????????@return $px/$designWidth*10 + rem;
? ??????????????????}
比如你寫一個(gè)div的寬度：
? ? ? ? ? ? ? ? ? ? div{
? ? ? ? ? ? ? ? ? ? ? ? ? ?widnth:px(實(shí)際像素);? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ??
????????????????????}
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 以上
