來到這家公司之后,和以前的工作發(fā)生了很大的轉(zhuǎn)變.以前我一直是做PC端頁面的.來到現(xiàn)在這家公司之后,主要是做手機移動端的頁面.

移動端的頁面在我這個做習慣了PC端頁面的人看來,應該是很簡單的一些事情.但是在上手的過程當中,還是發(fā)現(xiàn),原來移動端雖然DOM結(jié)構(gòu)要簡單得多,但是需要注意的細節(jié),還是非常多的.原因非常簡單,那就是,你必須考慮所有的手機上不同分辨率的展示效果.

以iphone為例,有以下分辨率

iphone4 640*960
iphone5 640*1136
iphone6 750*1334
iphone6plus 1242*2208

安卓陣營的分辨率以前各式各樣,現(xiàn)在基本分為三個

720P 720*1280
1080P 1080*1920
2K 1440*2560

這是一個幻覺,其實,在做手機H5的時候,分辨率根本不時這個樣子的….愁死人了,他們在瀏覽器中的真實分辨率是

以iphone為例,有以下分辨率

iphone4 320*480
iphone5 320*568
iphone6 375*667
iphone6plus 414*736

安卓陣營的分辨率以前各式各樣,現(xiàn)在基本分為三個

720P 360*640
1080P 360*640
2K 360*640

看到這個你是不是暈了…原來,安卓比蘋果強多了…呵呵,還真是這個樣子

其實,我們要做的是一個自適應的網(wǎng)頁,并且,這個自適應范圍的最低寬度為320px,也就是說,你的代碼必須保證在寬度320的時候是能夠瀏覽的,不能擠壓變形

在PC端制作網(wǎng)頁的時候,我們都習慣了的單位是px,那么是不是在移動端我們也用這個單位呢?我只能說,你可以這樣做.但是,最好不要.因為你不知道將來會發(fā)生什么.

我們經(jīng)過一些探討,和參考目前國際上通行的方案,采用的單位是rem

那么,什么是rem?我們都知道em是相對父級的尺寸單位.那么rem是root-em的縮寫,也就是說,是根相對單位,其相對的是html的font-size的單位.

好了,那么html的font-size默認是多大呢?是16px.也就是說,你的所有的尺寸依靠,都是依據(jù)16px的相對運算的結(jié)果.

知道了這個之后,我們就開始了復雜的計算,比如,我要設(shè)定一個12px 的文字,需要用什么百分比.會發(fā)現(xiàn),這個計算真心是坑爹啊,我在一個項目的一期就是這樣做的.但是這個計算真心累.

于是,我們采用了變通的方法,我們給html修改默認的font-size.于是,我們是這樣寫的.

html {font-size: 10px;}

整個世界都安靜了,按照這個方法計算,真的特別方便,比如,我需要12px我就寫1.2rem 就可以了.

但是,我迅速思考了一下這個問題,感覺我們在脫褲子放屁.

讓我們回到起點,我們?yōu)槭裁匆胷em而不用px呢?原因很簡單,我們是為了讓頁面不會因為一些設(shè)備的特殊性而限定為px,是為了去適應各種設(shè)備.

而我們給html加上了px為單位的,不是又返回原樣了嗎?那到不如直接去使用px,我們還少寫兩個字符呢.

那么,問題沒有解決的方法了嗎?還是繼續(xù)回到那反人類的計算當中去??

我迅速轉(zhuǎn)換了一下思維,把這段代碼改成了

html {font-size: 62.5%;}

改成了百分比之后,這個問題迅速得到了解決.那樣,瀏覽器在設(shè)置不同的默認文字大小的時候,我們的頁面都可以跟隨改變,而不在限定死了.

在PC端chrome瀏覽器中,默認最小文字是 12px 當你設(shè)置為這樣之后利用開發(fā)者工具進行調(diào)試的時候,會發(fā)現(xiàn)有一些詭異的地方.因此,需要將瀏覽器的最小文字設(shè)置為10或者6,一般都設(shè)置到6,這樣可以解決在PC端調(diào)試的問題.在移動端是沒有這個限制的(有,但默認關(guān)閉)

這個有專門的文章,可以百度一下,在這里我強調(diào)一點,需要加上下面的代碼.

 meta name= viewport content= width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no 

有一些人,包括某些知名的前端框架,會給css中加上這樣一段代碼:

* {box-sizing:border-box;}

我個人強烈不推薦這樣做.因為這破壞了盒子模型,雖然加上了這個之后,你寫代碼是方便了,但是當你引入某些外置資源的時候,你會發(fā)現(xiàn)變形到你根本調(diào)不回來的節(jié)奏.原因很簡單,這一句代碼,會改變頁面所有的元素的盒子模型.

曾經(jīng)因為這一句代碼,讓我們前端的人排查一個問題排查了兩天,始終無法解決.當我接手了項目之后,這個問題交給我,我一開始也莫名其妙.但是后來仔細檢查,才發(fā)現(xiàn)是這一句代碼惹的禍.

如果我們需要寫一個盒子,默認是百分百寬的,我們怎么做呢?

答案是,我們什么都不做,那么它就是百分百了.

在做移動端頁面的時候,盡量不要設(shè)定寬度,讓它自然的占據(jù)一行,這時候我們可以根據(jù)需要設(shè)定外填充和內(nèi)填充.

當然,并非所有的東西都可以這樣來做,總會遇到多列布局的時候

這就需要注意了,不要給rem這樣的單位的寬度,而是要給50%或者33.3%的寬度.

在設(shè)定了這樣的寬度之后,不要給這個元素設(shè)定內(nèi)填充和外填充.如果有需要的話,在這個元素里面再寫一個元素,給這個元素加你所需要的填充.

另外,在布局上,要盡量少用浮動布局,適當在細節(jié)部分使用定位布局,并做好隱藏溢出等處理.以防止浮動布局可能出現(xiàn)的問題.關(guān)于定位問題,可以參考我的另外一篇博文 Css 詳細解讀定位屬性 position 以及參數(shù);

在PC端的網(wǎng)頁制作中,我們一般就使用邊框?qū)傩詁order: 1px solid #ddd;但是在移動端,就需要特別注意了,因為邊框的寬度是計算在盒子模型當中的,所以,如果你使用不慎,可能造成你布局的困境.

因此,我們需要一些其他的參數(shù)來設(shè)定邊框,一般矩形的元素,我們可以使用outline: 1px solid #ddd;來制作邊框,這個屬性是不會計算在盒子模型當中的.

另外,當你嘗試做一個兩列布局的列表的時候,使用這個參數(shù),你會發(fā)現(xiàn)兩個元素之間的邊框好像是兩個像素.對的,你沒有看錯,確實是兩個像素.

怎么解決這個問題呢?一般情況下,你只需要給元素加上背景就可以解決這個問題.后面的元素的背景會遮住前面元素的outline發(fā)出來的邊框.

這是一個非常實用的技巧.

但是,如果元素不是矩形的怎么辦呢?

其實很好解決.因為,在CSS中,不僅僅是outline可以來模擬邊框,還有一個屬性,也是可以模擬邊框的,那就是CSS3的box-shadow外發(fā)光屬性.

例如,我要給元素加上一個1px的實線邊框,你這樣寫,是不行的

box-shadow:0 0 1px #ddd;

你會發(fā)現(xiàn),你模擬出來的邊框會有點發(fā)虛.

正確的寫法是

box-shadow:0 0 0 1px #ddd

;看到這樣寫很奇怪?去w3school看下就明白了.

當然,這兩種做法都是有弊端的,比如我就想設(shè)置一條左邊框的線條,而不時整個的都有邊框怎么辦?

還是有辦法的,我們可以借助偽元素來實現(xiàn)模擬,:before和:after;具體怎么實現(xiàn),這里不做演示了.

這里需要說明一下,網(wǎng)上有不少0.5px邊框的實現(xiàn)教程,這樣做的好處是,可以做出比較細的線條,讓我們的H5看上去更像原生的APP.我個人的建議是,不要嘗試這樣做,因為很麻煩,而且兼容性都有問題,得不償失.那么正確的做法是什么呢?很簡單——跟你的設(shè)計師說,盡量不要設(shè)計線條-_-|||反正我就是這樣跟我們團隊的設(shè)計說的.

為什么使用zepot?

原因只有一個,它小.還有其他的好處嗎?沒發(fā)現(xiàn).

我個人的建議是使用jquery2.x的版本,好處有如下

擁有大量的插件可以使用

功能比zepot強大太多

效能比zepot強大

習慣了jquery

以上就是必會的移動端Html5的基礎(chǔ)知識點的詳細內(nèi)容，其它編程語言

鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯(lián)系我們修改或刪除，多謝。