Html5的基礎知識點整理

這篇文章主要介紹“Html5的基礎知識點整理”，在日常操作中，相信很多人在Html5的基礎知識點整理問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”Html5的基礎知識點整理”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！

移動端的分辨率有哪些呢?

以iphone為例,有以下分辨率

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

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

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

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

以iphone為例,有以下分辨率

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

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

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

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

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

移動端使用什么單位?

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

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

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

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

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

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

html {font-size: 10px;}

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

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

讓我們回到起點,我們為什么要用rem而不用px呢?原因很簡單,我們是為了讓頁面不會因為一些設備的特殊性而限定為px,是為了去適應各種設備.

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

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

我迅速轉換了一下思維,把這段代碼改成了

html {font-size: 62.5%;}

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

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

移動端html5頁面 Meta設置

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

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

盒子寬度

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

* {box-sizing:border-box;}

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

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

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

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

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

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

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

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

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

邊框的處理

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

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

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

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

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

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

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

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

box-shadow:0 0 1px #ddd;

你會發現,你模擬出來的邊框會有點發虛.

正確的寫法是

box-shadow:0 0 0 1px #ddd

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

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

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

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

使用jquery還是zepot?

為什么使用zepot?

原因只有一個,它小.還有其他的好處嗎?沒發現.

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

1. 擁有大量的插件可以使用

2. 功能比zepot強大太多

3. 效能比zepot強大

4. 習慣了jquery

到此，關于“Html5的基礎知識點整理”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注億速云網站，小編會繼續努力為大家帶來更多實用的文章！