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