建站
咨詢
售后
建站咨詢
新聞中心
這篇文章主要介紹“Html5的基礎(chǔ)知識(shí)點(diǎn)整理”，在日常操作中，相信很多人在Html5的基礎(chǔ)知識(shí)點(diǎn)整理問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”Html5的基礎(chǔ)知識(shí)點(diǎn)整理”的疑惑有所幫助！接下來，請跟著小編一起來學(xué)習(xí)吧！
以iphone為例,有以下分辨率
iphone4 640*960
iphone5 640*1136
iphone6 750*1334
iphone6plus 1242*2208
安卓陣營的分辨率以前各式各樣,現(xiàn)在基本分為三個(gè)
720P 720*1280
1080P 1080*1920
2K 1440*2560
這是一個(gè)幻覺,其實(shí),在做手機(jī)H5的時(shí)候,分辨率根本不時(shí)這個(gè)樣子的….愁死人了,他們在瀏覽器中的真實(shí)分辨率是
以iphone為例,有以下分辨率
iphone4 320*480
iphone5 320*568
iphone6 375*667
iphone6plus 414*736
安卓陣營的分辨率以前各式各樣,現(xiàn)在基本分為三個(gè)
720P 360*640
1080P 360*640
2K 360*640
看到這個(gè)你是不是暈了…原來,安卓比蘋果強(qiáng)多了…呵呵,還真是這個(gè)樣子
其實(shí),我們要做的是一個(gè)自適應(yīng)的網(wǎng)頁,并且,這個(gè)自適應(yīng)范圍的最低寬度為320px,也就是說,你的代碼必須保證在寬度320的時(shí)候是能夠?yàn)g覽的,不能擠壓變形
移動(dòng)端使用什么單位?在PC端制作網(wǎng)頁的時(shí)候,我們都習(xí)慣了的單位是px,那么是不是在移動(dòng)端我們也用這個(gè)單位呢?我只能說,你可以這樣做.但是,最好不要.因?yàn)槟悴恢缹頃?huì)發(fā)生什么.
我們經(jīng)過一些探討,和參考目前國際上通行的方案,采用的單位是rem
那么,什么是rem?我們都知道em是相對父級的尺寸單位.那么rem是root-em的縮寫,也就是說,是根相對單位,其相對的是html的font-size的單位.
好了,那么html的font-size默認(rèn)是多大呢?是16px.也就是說,你的所有的尺寸依靠,都是依據(jù)16px的相對運(yùn)算的結(jié)果.
知道了這個(gè)之后,我們就開始了復(fù)雜的計(jì)算,比如,我要設(shè)定一個(gè)12px的文字,需要用什么百分比.會(huì)發(fā)現(xiàn),這個(gè)計(jì)算真心是坑爹啊,我在一個(gè)項(xiàng)目的一期就是這樣做的.但是這個(gè)計(jì)算真心累.
于是,我們采用了變通的方法,我們給html修改默認(rèn)的font-size.于是,我們是這樣寫的.
html {font-size: 10px;}整個(gè)世界都安靜了,按照這個(gè)方法計(jì)算,真的特別方便,比如,我需要12px我就寫1.2rem 就可以了.
但是,我迅速思考了一下這個(gè)問題,感覺我們在脫褲子放屁.
讓我們回到起點(diǎn),我們?yōu)槭裁匆?code>rem而不用px呢?原因很簡單,我們是為了讓頁面不會(huì)因?yàn)橐恍┰O(shè)備的特殊性而限定為px,是為了去適應(yīng)各種設(shè)備.
而我們給html加上了px為單位的,不是又返回原樣了嗎?那到不如直接去使用px,我們還少寫兩個(gè)字符呢.
那么,問題沒有解決的方法了嗎?還是繼續(xù)回到那反人類的計(jì)算當(dāng)中去??
我迅速轉(zhuǎn)換了一下思維,把這段代碼改成了
html {font-size: 62.5%;}改成了百分比之后,這個(gè)問題迅速得到了解決.那樣,瀏覽器在設(shè)置不同的默認(rèn)文字大小的時(shí)候,我們的頁面都可以跟隨改變,而不在限定死了.
在PC端chrome瀏覽器中,默認(rèn)最小文字是12px當(dāng)你設(shè)置為這樣之后利用開發(fā)者工具進(jìn)行調(diào)試的時(shí)候,會(huì)發(fā)現(xiàn)有一些詭異的地方.因此,需要將瀏覽器的最小文字設(shè)置為10或者6,一般都設(shè)置到6,這樣可以解決在PC端調(diào)試的問題.在移動(dòng)端是沒有這個(gè)限制的(有,但默認(rèn)關(guān)閉)
這個(gè)有專門的文章,可以百度一下,在這里我強(qiáng)調(diào)一點(diǎn),需要加上下面的代碼.
盒子寬度
有一些人,包括某些知名的前端框架,會(huì)給css中加上這樣一段代碼:
* {box-sizing:border-box;}我個(gè)人強(qiáng)烈不推薦這樣做.因?yàn)檫@破壞了盒子模型,雖然加上了這個(gè)之后,你寫代碼是方便了,但是當(dāng)你引入某些外置資源的時(shí)候,你會(huì)發(fā)現(xiàn)變形到你根本調(diào)不回來的節(jié)奏.原因很簡單,這一句代碼,會(huì)改變頁面所有的元素的盒子模型.
曾經(jīng)因?yàn)檫@一句代碼,讓我們前端的人排查一個(gè)問題排查了兩天,始終無法解決.當(dāng)我接手了項(xiàng)目之后,這個(gè)問題交給我,我一開始也莫名其妙.但是后來仔細(xì)檢查,才發(fā)現(xiàn)是這一句代碼惹的禍.
如果我們需要寫一個(gè)盒子,默認(rèn)是百分百寬的,我們怎么做呢?
答案是,我們什么都不做,那么它就是百分百了.
在做移動(dòng)端頁面的時(shí)候,盡量不要設(shè)定寬度,讓它自然的占據(jù)一行,這時(shí)候我們可以根據(jù)需要設(shè)定外填充和內(nèi)填充.
當(dāng)然,并非所有的東西都可以這樣來做,總會(huì)遇到多列布局的時(shí)候
這就需要注意了,不要給rem這樣的單位的寬度,而是要給50%或者33.3%的寬度.
在設(shè)定了這樣的寬度之后,不要給這個(gè)元素設(shè)定內(nèi)填充和外填充.如果有需要的話,在這個(gè)元素里面再寫一個(gè)元素,給這個(gè)元素加你所需要的填充.
另外,在布局上,要盡量少用浮動(dòng)布局,適當(dāng)在細(xì)節(jié)部分使用定位布局,并做好隱藏溢出等處理.以防止浮動(dòng)布局可能出現(xiàn)的問題.關(guān)于定位問題,可以參考我的另外一篇博文 Css 詳細(xì)解讀定位屬性 position 以及參數(shù);
邊框的處理在PC端的網(wǎng)頁制作中,我們一般就使用邊框?qū)傩?code>border: 1px solid #ddd;但是在移動(dòng)端,就需要特別注意了,因?yàn)檫吙虻膶挾仁怯?jì)算在盒子模型當(dāng)中的,所以,如果你使用不慎,可能造成你布局的困境.
因此,我們需要一些其他的參數(shù)來設(shè)定邊框,一般矩形的元素,我們可以使用outline: 1px solid #ddd;來制作邊框,這個(gè)屬性是不會(huì)計(jì)算在盒子模型當(dāng)中的.
另外,當(dāng)你嘗試做一個(gè)兩列布局的列表的時(shí)候,使用這個(gè)參數(shù),你會(huì)發(fā)現(xiàn)兩個(gè)元素之間的邊框好像是兩個(gè)像素.對的,你沒有看錯(cuò),確實(shí)是兩個(gè)像素.
怎么解決這個(gè)問題呢?一般情況下,你只需要給元素加上背景就可以解決這個(gè)問題.后面的元素的背景會(huì)遮住前面元素的outline發(fā)出來的邊框.
這是一個(gè)非常實(shí)用的技巧.
但是,如果元素不是矩形的怎么辦呢?
其實(shí)很好解決.因?yàn)?在CSS中,不僅僅是outline可以來模擬邊框,還有一個(gè)屬性,也是可以模擬邊框的,那就是CSS3的box-shadow外發(fā)光屬性.
例如,我要給元素加上一個(gè)1px的實(shí)線邊框,你這樣寫,是不行的
box-shadow:0 0 1px #ddd;
你會(huì)發(fā)現(xiàn),你模擬出來的邊框會(huì)有點(diǎn)發(fā)虛.
正確的寫法是
box-shadow:0 0 0 1px #ddd
;看到這樣寫很奇怪?去w3school看下就明白了.
當(dāng)然,這兩種做法都是有弊端的,比如我就想設(shè)置一條左邊框的線條,而不時(shí)整個(gè)的都有邊框怎么辦?
還是有辦法的,我們可以借助偽元素來實(shí)現(xiàn)模擬,:before和:after;具體怎么實(shí)現(xiàn),這里不做演示了.
這里需要說明一下,網(wǎng)上有不少0.5px邊框的實(shí)現(xiàn)教程,這樣做的好處是,可以做出比較細(xì)的線條,讓我們的H5看上去更像原生的APP.我個(gè)人的建議是,不要嘗試這樣做,因?yàn)楹苈闊?而且兼容性都有問題,得不償失.那么正確的做法是什么呢?很簡單——跟你的設(shè)計(jì)師說,盡量不要設(shè)計(jì)線條-_-|||反正我就是這樣跟我們團(tuán)隊(duì)的設(shè)計(jì)說的.
使用jquery還是zepot?為什么使用zepot?
原因只有一個(gè),它小.還有其他的好處嗎?沒發(fā)現(xiàn).
我個(gè)人的建議是使用jquery2.x的版本,好處有如下
擁有大量的插件可以使用
功能比zepot強(qiáng)大太多
效能比zepot強(qiáng)大
習(xí)慣了jquery
到此，關(guān)于“Html5的基礎(chǔ)知識(shí)點(diǎn)整理”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識(shí)，請繼續(xù)關(guān)注創(chuàng)新互聯(lián)網(wǎng)站制作公司網(wǎng)站，小編會(huì)繼續(xù)努力為大家?guī)砀鄬?shí)用的文章！
網(wǎng)站欄目：Html5的基礎(chǔ)知識(shí)點(diǎn)整理-創(chuàng)新互聯(lián)
文章URL：http://www.dlmjj.cn/article/ccdgss.html
