資訊專欄INFORMATION COLUMN
摘要：屏幕適配是一個(gè)很容易被忽略的問題，但對于精益求精的產(chǎn)品而言，是必不可少的。對于開發(fā)的求職者而言，也是一個(gè)必需要理解清楚的經(jīng)典問題文啃先生壹移動(dòng)端適配的是什么我們討論的是網(wǎng)頁適配多種尺寸屏幕，讓網(wǎng)頁效果看起來和設(shè)計(jì)師的設(shè)計(jì)稿一樣。
屏幕適配是一個(gè)很容易被忽略的問題，但對于精益求精的產(chǎn)品而言，是必不可少的。對于Web開發(fā)的求職者而言，也是一個(gè)必需要理解清楚的經(jīng)典問題
文 | 啃先生 Mar,1st,2016
壹 | Fisrt移動(dòng)端適配的是什么？
我們討論的是網(wǎng)頁適配多種尺寸屏幕，讓網(wǎng)頁效果看起來和設(shè)計(jì)師的設(shè)計(jì)稿一樣。說白了就是同一套代碼在不同分辨率的手機(jī)上跑時(shí)，頁面元素間的間距，留白，以及圖片大小會(huì)隨著變化，在比例上跟設(shè)計(jì)稿一致。
舉個(gè)例子吧
圖1. 260*400的屏幕
圖2. 380*400的屏幕
上邊的頁面在不同大小屏幕上的展現(xiàn)，咋一看沒什么問題，一般的工程師會(huì)認(rèn)為已經(jīng)OK了，所以前端工程師很容易忽略屏幕適配。但是對于一些精益求精的產(chǎn)品而言，這還達(dá)不到要求。例如有以下問題：
圖1的屏幕的尺寸較小，因此頭像應(yīng)該小些，話題左邊的空白也應(yīng)該小一些。
圖片應(yīng)該保持正方形，而且兩張圖之間的邊距應(yīng)該隨屏幕變化而變化
貳 | Second明白了，所以padding，margin，圖片等的大小基本都要做適配
那有什么方法可以做到這種適配？
關(guān)鍵要找到一種長度單位，使得一樣的取值，在不同尺寸的屏幕上的大小按比例縮放。
長度單位我只知道px ?
我將在下一期的文章里推有關(guān)viewport和css像素px中的細(xì)節(jié)，這篇文章只關(guān)注如何適配，所以先只談結(jié)論：
網(wǎng)頁在viewport中布局，viewport被分成一個(gè)個(gè)小方塊，一個(gè)CSS像素占一個(gè)方塊
在設(shè)置了viewport寬度等于設(shè)備寬度的情況下，通過某種算法，在不同大小的屏幕上，1個(gè)CSS像素所占屏幕的物理尺寸是一樣大的
既然1個(gè)CSS像素在不同屏幕上物理尺寸一樣大，那px肯定不能做為適配的方法了
長度單位rem是相對于html標(biāo)簽的font-size來計(jì)算的。例如html標(biāo)簽設(shè)置font-size:36px，同時(shí)div設(shè)置width:1.2rem。那么這個(gè)div的寬度就是1.2rem=36px*1.2=43.2px
如上面的例子，如果加載頁面的時(shí)候，使用JS根據(jù)屏幕的大小動(dòng)態(tài)設(shè)置html標(biāo)簽的font-size，隨著html標(biāo)簽font-size的值變化，div的1.2rem換算成px的值 也跟著變化，即實(shí)現(xiàn)了div隨屏幕大小變化而變化，而CSS代碼始終是width:1.2rem。以此類推到頁面所有的元素。
叁 | Third明白了，奧秘就在于結(jié)合px的固定尺寸和rem的相對尺寸！
原理我明白了，你有沒有可執(zhí)行的具體方案 ?？
業(yè)內(nèi)比較流行的做法（參考阿里的flexible），有以下要點(diǎn)：
設(shè)置viewport為設(shè)備寬度（這里不一定，但目前先這樣足矣）
將viewport分成10rem，并計(jì)算出1rem在當(dāng)前瀏覽器的像素值，把它賦予html標(biāo)簽的font-size（分成10rem只是為了方便計(jì)算而已）
寫CSS代碼時(shí)，遇到要適配的地方，比如width，margin，padding等，就不要再用px了，改成用rem
JS和Html代碼如下：
啃先生的網(wǎng)
CSS代碼做了類似如下的修改：
運(yùn)行結(jié)果如下：邊距和頭像圖片都隨屏幕變化而變化了
代碼量很少，就是要理解消化。有一個(gè)問題，設(shè)計(jì)師給的設(shè)計(jì)稿尺寸單位都是用px，但是剛剛說的第3步，寫CSS的時(shí)候要用rem，這個(gè)怎么換算？會(huì)很麻煩
現(xiàn)有設(shè)計(jì)師提供寬度為400px的設(shè)計(jì)稿，其中某個(gè)圖片的寬度設(shè)計(jì)為20px，那么，CSS的寫法就是img{width: 0.5rem;}，怎么得出這個(gè)結(jié)果的呢？
設(shè)計(jì)稿的寬度視同手機(jī)寬度，即假設(shè)有一個(gè)viewport為400px的手機(jī)
將它分成10rem，每個(gè)rem為40px;
那么圖片寬度20px自然就是0.5rem;
且慢，豈不是意味著，每次寫到尺寸的地方，我都要先在草稿紙上把設(shè)計(jì)師給的px換算成rem？別急，sublime text 3有一款插件可以幫助你進(jìn)行這個(gè)換算，你只需要輸入20px，它會(huì)自動(dòng)幫你換算成 0.5rem，看以下圖就秒懂了
參考使用Flexible實(shí)現(xiàn)手淘H5頁面的終端適配（https://github.com/amfe/article/issues/17）
移動(dòng)端高清、多屏適配方案（http://www.html-js.com/article/Mobile-terminal-H5-mobile-terminal-HD-multi-screen-adaptation-scheme%203041）
A tale of two viewports（http://www.quirksmode.org/mobile/viewports.html）
移動(dòng)適配這個(gè)會(huì)作為一個(gè)小系列來寫，下期寫瀏覽器是怎么計(jì)算CSS像素的，它在不同屏幕上的差異。
啃先生 開始碼字才知道碼字不易，堅(jiān)持碼字更不易。轉(zhuǎn)載請聲明來源
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://hztianpu.com/yun/78784.html
摘要：復(fù)雜紛擾的世界背后，總會(huì)有萬變不離其宗的簡單規(guī)則文啃先生壹前面寫了兩篇移動(dòng)適配相關(guān)的文章移動(dòng)怎么做屏幕適配一重點(diǎn)介紹了怎樣利于來處理尺寸等等相關(guān)的適配。所以到目前為止我所整理出來的三篇文章，是移動(dòng)適配知識(shí)中非常重要的基礎(chǔ)知識(shí)。 showImg(https://segmentfault.com/img/bVti5j);復(fù)雜紛擾的世界背后，總會(huì)有萬變不離其宗的簡單規(guī)則 文 | 啃先生 Ma...
摘要：復(fù)雜紛擾的世界背后，總會(huì)有萬變不離其宗的簡單規(guī)則文啃先生壹前面寫了兩篇移動(dòng)適配相關(guān)的文章移動(dòng)怎么做屏幕適配一重點(diǎn)介紹了怎樣利于來處理尺寸等等相關(guān)的適配。所以到目前為止我所整理出來的三篇文章，是移動(dòng)適配知識(shí)中非常重要的基礎(chǔ)知識(shí)。 showImg(https://segmentfault.com/img/bVti5j);復(fù)雜紛擾的世界背后，總會(huì)有萬變不離其宗的簡單規(guī)則 文 | 啃先生 Ma...
摘要：根據(jù)上面的圖片，安卓手機(jī)，屬于，轉(zhuǎn)換系數(shù)是因此這臺(tái)手機(jī)中，個(gè)像素物理像素。這個(gè)轉(zhuǎn)換系數(shù)，也等同于，設(shè)備像素比。 showImg(https://segmentfault.com/img/bVtcMA);一個(gè)像素里復(fù)雜紛擾的世界 文 | 啃先生 Mar.3rd.2016 首發(fā)于微信公眾號(hào)（啃先生） 上一篇發(fā)了《【移動(dòng)適配】移動(dòng)Web怎么做屏幕適配》，現(xiàn)在繼續(xù)。 壹 | Fisrt 在...
摘要：根據(jù)上面的圖片，安卓手機(jī)，屬于，轉(zhuǎn)換系數(shù)是因此這臺(tái)手機(jī)中，個(gè)像素物理像素。這個(gè)轉(zhuǎn)換系數(shù)，也等同于，設(shè)備像素比。 showImg(https://segmentfault.com/img/bVtcMA);一個(gè)像素里復(fù)雜紛擾的世界 文 | 啃先生 Mar.3rd.2016 首發(fā)于微信公眾號(hào)（啃先生） 上一篇發(fā)了《【移動(dòng)適配】移動(dòng)Web怎么做屏幕適配》，現(xiàn)在繼續(xù)。 壹 | Fisrt 在...
閱讀 1534·2021-11-04 16:11
閱讀 3216·2021-10-12 10:11
閱讀 3192·2021-09-29 09:47
閱讀 1831·2021-09-22 15:40
閱讀 1176·2019-08-29 15:43
閱讀 2959·2019-08-29 13:50
閱讀 1744·2019-08-29 13:28
閱讀 2836·2019-08-29 12:54
