標籤:標籤 區別 相對 html png 移動端 web頁面 單位 add
最近做了一個針對移動端的項目,在開發中遇到了不少的坑,學到了也不少,發現有許多地方值得寫一下,以供做web移動端同學參考參考。
一、單位
說到移動端,不得不提適配問題,大大小小的行動裝置不但讓做android和ios的難過,因為裝置大小和瀏覽器的差異,現在也讓前端開始頭疼了,不過,方法總是比問題多,我們是革命的隊伍,遇到問題就要上!
因為現如今市面上行動裝置的解析度大小不同,顯然咱們常用的px單位在這個時候就有些不太靈光了,為此,css3出了一個新單位——rem,rem是移動端神器,它完美解決了解析度的適配問題。
rem就是相對於根項目<html>的font-size來做計算,舉個栗子:
這樣,一個寬高各100px的box就出現了,很簡單吧,發現沒,有些像我們以前常用的em,不過rem是相對於根項目(<html>)的字型大小,em相對 於父元素的字型大小。
雖然很簡單,但是行動裝置那麼多,我們又怎麼根據手機螢幕的解析度不同,去設定<html>的字型大小呢?
我知道的方法有2個:
1)通過css媒體查詢
,通過媒體查詢的方式,只需要把常用的螢幕寬度考慮進去即可,能夠滿足大部分應用情境,不過這一做法不夠嚴謹,處女座的你,怎麼能滿足呢?那就用js去設定fontSize吧!
2)通過js計算
通過js裝置的螢幕解析度,可以計算出相應的字型的大小,這個方法可以適配所有螢幕的大小,這下就完美許多了。
不過有些時候會很麻煩,因為rem會涉及到換算的問題,比如70px的寬,根目錄字型是12px,那換算公式為:70/12 = 5.83333333~,每次寫一個單位都要用計算機去算,想想就淚崩了,不過作為程式猿,怎麼能讓人去做這種事,這工作可以讓Less或者Sass等前置處理器去完成。
二、使用<meta>標籤中的viewport布局
有了rem單位還不夠,得再加上viewport,有了這個東西,麻麻再也不用擔心我的移動端適配問題了,話不多說,直接
紅圈圈的必須要,有了這個<meta>標籤,頁面就有那麼點意思了。
三、彈性布局盒子布局
以前PC端布局方式通常會使用float、margin、padding等方式布局,這些方法不僅有繁瑣的計算,而且在移動端還
容易出錯。現在移動端,有更好的選擇,使用flexbox布局方式。舉個栗子:用flex做tab
html代碼: css代碼:
做均分的tab,應該是flexbox最常見的一個功能了,實現原理很簡單,,只需要給“父元素”,“子項目”
分別賦予“display:flex”,”flex:1″即可。子項目的寬度不會根據內容的長短而發生改變。前端同學增加或刪減
tab數量,只需要增減DOM結構即可,無需樣式的修改。
一直以來這種布局方式都有相容性問題,讓前端同學想用,又不敢用,究其原因也就是即分不清它各個版本的
編寫規範和相容性。值得驚喜的是,目前除了Opera mobile12,移動端的各大瀏覽器都是支援flexbox的舊版文法
的,但不包含flex的wrap屬性。所以可以大膽用,不用太擔心。
四、坑
布局問題算是解決了,雖然現在看似很完美了,不過,還是有很多坑在等著我們呢!
1、使用rem相容性沒問題,但是還是有許多問題需要注意
a) 做出來的效果與有些許偏差
為什麼會出現這個原因呢?後來發現,這是因為瀏覽器對小數數值的處理各不相同導致。不同瀏覽器計算rem轉
換為px數值時,對於小數點後的數值的處理是有所偏差,rem計算偏差的根源是瀏覽器核心數字類型的區別,
如果瀏覽器的核心數字類型是float類型,能夠較好地支援有小數點的數值。當瀏覽器核心數字類型是int類型,
不支援小數點,會對數字進行四捨五入,這樣就會有偏差。如果元素越大偏差得就越明顯!這個坑幾乎無法避免,
只能讓他更好的適應最多的瀏覽器。比如chroem核心。
b) 雪碧圖定位問題
由上面我們可以得知,rem的換算成px的尺寸非嚴格精確,如果雪碧圖表徵圖之間的距離過小,就可能導致表徵圖過界,
因此圖與圖之間的間隙需要留相應大一點。
c) rem單位最好不用在PC端
直接舉個栗子:
代碼:
看了代碼,大家應該猜到,這應該是兩個完全相同的盒子才對,不過,效果卻是這樣的
PC效果:
iPhone6效果:
從效果得知,PC端瀏覽器對rem單位支援並不友好,終其原因,我也不得而知,望有知道的同學,多多分享,
所以,前端同學盡量別把這個單位放到pc端上使用,以免和設計圖有所出入。
1、使用彈性盒子模型需要注意的問題。
a) 雖然移動端的各大瀏覽器都是支援flexbox的舊版文法的,但是還是得有相容性寫法;
b) 在開發的時候,我發現在使用彈性盒子模型時,如果涉及到文字的時候需要注意,在li裡寫上“我們”和“我們的”,分別是兩個字和三個字。會有不同的寬度而導致不均分,解決辦法,如上面css所示,我設定了子項目width為5%(只有設定了li是統一的width就行,不一定需要是5%)就可以解決這個問題。
總結:
說到這兒,web移動端布局問題基本上算是完了,不過,學這些還不夠,想做好web移動端開發,
還是需要學習很多很多東西(比如效能問題)才能做出使用者體驗超好的web頁面,革命尚未成功,同志還需努力啊。
移動端布局