產(chǎn)品經(jīng)理學(xué)技術(shù)：移動Web怎么做屏幕適配（一）_html/css_WEB-ITnose

產(chǎn)品經(jīng)理要不要懂技術(shù)的問題已經(jīng)無需再討論了，希望產(chǎn)品經(jīng)理們可以從這些文章里，學(xué)到一點(diǎn)兒技術(shù)原理。

相關(guān)概念：

viewport：屏幕可見區(qū)域，你可以理解成顯示屏幕大小。

1

移動端適配一般指網(wǎng)頁適配多種尺寸屏幕，讓網(wǎng)頁效果看起來和設(shè)計(jì)師的設(shè)計(jì)稿一樣。說白了就是同一套代碼在不同分辨率的手機(jī)上跑時，頁面元素間的間距，留白，以及圖片大小會隨著變化，在比例上跟設(shè)計(jì)稿一致，達(dá)到最優(yōu)的視覺效果。

圖1. 260*400的屏幕

圖2. 380*400的屏幕

上面頁面在不同大小屏幕上的展現(xiàn)，乍一看沒什么問題，一般的工程師會認(rèn)為已經(jīng)OK了，所以前端工程師很容易忽略屏幕適配。但如果你是摳細(xì)節(jié)體驗(yàn)的產(chǎn)品經(jīng)理，你可能會發(fā)現(xiàn)如下問題：

圖1的屏幕的尺寸較小，因此頭像應(yīng)該小些，話題左邊的空白也應(yīng)該小一些。

圖片應(yīng)該保持正方形，而且兩張圖之間的邊距應(yīng)該隨屏幕變化而變化

說白了，就是沒有做好不同屏幕的適配，在某些屏幕下的視覺效果未能達(dá)到最優(yōu)。

2

本文章只關(guān)注如何適配，所以先只談結(jié)論，后面有機(jī)會可以講講viewport和css像素px中的細(xì)節(jié)。

網(wǎng)頁在viewport中布局，viewport被分成一個個小方塊，一個CSS像素占一個方塊

在設(shè)置了viewport寬度等于設(shè)備寬度的情況下，通過某種算法，在不同大小的屏幕上，1個CSS像素所占屏幕的物理尺寸是一樣大的

長度單位rem是相對于html標(biāo)簽的font-size（字體尺寸）的。例如html標(biāo)簽設(shè)置font-size:36px，同時div設(shè)置width:1.2rem。那么這個div的寬度就是1.2rem=36px*1.2=43.2px

如上面的例子，如果加載頁面的時候，使用JS根據(jù)屏幕的大小動態(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。以此類推到頁面所有的元素。

3

業(yè)內(nèi)比較流行的做法（參考阿里的flexible），有以下要點(diǎn)：

設(shè)置viewport為設(shè)備寬度（這里不一定，但目前先這樣足矣）

將viewport分成10rem，并計(jì)算出1rem在當(dāng)前瀏覽器的像素值，把它賦予html標(biāo)簽的font-size（分成10rem只是為了方便計(jì)算而已）

寫CSS代碼時，遇到要適配的地方，比如width，margin，padding等，就不要再用px了，改成用rem

JS和Html代碼如下：

CSS代碼做了類似如下的修改：

運(yùn)行結(jié)果如下：邊距和頭像圖片都隨屏幕變化而變化了

看不懂代碼沒關(guān)系，簡單解釋下就是，在HTML頁面加載完成之后，把頁面寬度等分為若干份（這里是10份），比如頁面寬度是W 像素，則 1rem = W/10 像素，后面所有用到寬度的地方，都用 rem 來換算。比如外邊距、內(nèi)邊距等。

4

現(xiàn)有設(shè)計(jì)師提供寬度為400px的設(shè)計(jì)稿，其中某個圖片的寬度設(shè)計(jì)為20px，那么，CSS的寫法就是img{width: 0.05rem;}，怎么得出這個結(jié)果的呢？

1. 設(shè)計(jì)稿的寬度視同手機(jī)寬度，即假設(shè)有一個viewport為400px的手機(jī)
2. 將它分成10rem，每個rem為40px;
3. 那么圖片寬度20px自然就是0.5rem;

且慢，豈不是意味著，每次寫到尺寸的地方，我都要先在草稿紙上把設(shè)計(jì)師給的px換算成rem？別急，sublime text 3有一款插件可以幫助你進(jìn)行這個換算，你只需要輸入20px，它會自動幫你換算成 0.5rem，看以下圖就秒懂了

看吧，工程師手上很多工具，可以提高效率的呢~

本文由 產(chǎn)品100 為你推薦并呈現(xiàn)

文章來源：微信公眾號：程序員和產(chǎn)品經(jīng)理（devpdm）

文章作者：啃先生

友情提示：

若出處標(biāo)注錯誤，請聯(lián)系QQ：2977686517及時更正，感謝理解和支持！

少年關(guān)注我們的官方微博@產(chǎn)品100和微信訂閱號：chanpin100ghsd，有驚喜哦！

聲明：本網(wǎng)頁內(nèi)容旨在傳播知識，若有侵權(quán)等問題請及時與本網(wǎng)聯(lián)系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com