手機(jī)網(wǎng)頁(yè)布局經(jīng)驗(yàn)總結(jié)_html/css_WEB-ITnose

引言

眾所周知，在當(dāng)今移動(dòng)互聯(lián)網(wǎng)大行其道的現(xiàn)在，基本上所有的年輕人都是使用過(guò)手機(jī)去瀏覽一些網(wǎng)站的資訊或者使用過(guò)手機(jī)去購(gòu)物網(wǎng)站支付買(mǎi)過(guò)東西，但是大家有沒(méi)有想過(guò)這樣的網(wǎng)頁(yè)是怎樣改制作出來(lái)的呢？今天我們就來(lái)探討一下這個(gè)問(wèn)題

閱讀讀者具備基礎(chǔ)

1、熟練的使用HTML和CSS

2、對(duì)HTML5和CSS3有一定的了解，這個(gè)不必深入

3、掌握J(rèn)avaScript、jquery腳本語(yǔ)言

如果還不能具備以上基礎(chǔ)的讀者們建議你們還是去網(wǎng)上找一下其他的一些相關(guān)的教學(xué)貼看一看，要不然可能會(huì)跟不上下面的學(xué)習(xí)了

HTML的特殊用法

首先我們先來(lái)講解一下HTML中一些特殊的語(yǔ)法，可能對(duì)于還是HTML入門(mén)級(jí)的新手來(lái)說(shuō)可能沒(méi)見(jiàn)過(guò)，但是如大神那么請(qǐng)?zhí)^(guò)這個(gè)模塊

那么我們就先從這張圖片說(shuō)起：

相信這張圖片大家一定是不會(huì)陌生的，沒(méi)錯(cuò)這個(gè)就是淘寶網(wǎng)的標(biāo)題欄，其中的紅色邊框標(biāo)出來(lái)的圖標(biāo)在這里是相當(dāng)?shù)膿屟郏悄阒肋@個(gè)是怎樣制作的嗎？

首先我們要準(zhǔn)備一張，淘寶的logo圖標(biāo)，這張我們可以直接從百度上下載， 下載地址

下載完成之后我們要將圖片的格式轉(zhuǎn)換成為ico格式，這個(gè)直接在網(wǎng)上查找轉(zhuǎn)換工具就好了， 地址

生成后將圖片下載下來(lái)，重命名為taobaoLogo，新建一個(gè)HTML的項(xiàng)目，代碼如下：

運(yùn)行的結(jié)果如下：

從這個(gè)例子中我們可以發(fā)現(xiàn)，只要添加上依據(jù)語(yǔ)句就可以實(shí)現(xiàn)這個(gè)效果了，但是在實(shí)際的使用中，我們還需要添加上另一句語(yǔ)句，代碼如下：

運(yùn)行的效果也是一樣的

這里，細(xì)心的讀者可能會(huì)問(wèn)既然效果都是一樣的，那么為什么要多此一舉呢， 這樣做當(dāng)然有這樣做的必要，詳見(jiàn) 這篇文章 ，在此就不必啰嗦了

其中一般這個(gè)Logo圖標(biāo)不但可以運(yùn)用在標(biāo)題中，而且還可以放在收藏夾中去使用，只需要將添加標(biāo)題欄中rel="short icon"改為rel="bookmark"即可

在手機(jī)網(wǎng)頁(yè)的制作上，我們一般是不讓用戶(hù)手動(dòng)的去改變頁(yè)面的大小的，所以下面的這一句是必須加上的

除了上面的這一句，下面的這些也是制作手機(jī)頁(yè)面必須加上的

除此之外，還有其他一些的屬性供你自由的選擇

獲取滾動(dòng)條的滾動(dòng)值

 window.scrollY window.scrollX

桌面瀏覽器中想要獲取滾動(dòng)條的值是通過(guò)document.scrollTop和document.scrollLeft得到的，但在iOS中你會(huì)發(fā)現(xiàn)這兩 個(gè)屬性是未定義的，為什么呢？因?yàn)樵趇OS中沒(méi)有滾動(dòng)條的概念，在Android中通過(guò)這兩個(gè)屬性可以正常獲取到滾動(dòng)條的值，那么在iOS中我們?cè)撊绾潍@ 取滾動(dòng)條的值呢？就是上面兩個(gè)屬性，但是事實(shí)證明android也支持這屬性，所以索性都用woindow.scroll.

禁止用戶(hù)選擇文本

-webkit-user-select:none

這個(gè)屬性是禁止用戶(hù)選擇文本，對(duì)安卓和蘋(píng)果都是有效的

淺談一下box-sizing

這個(gè)屬性可能大家比較陌生吧， 因?yàn)檫@個(gè)屬性是是CSS3中新加入的，為了實(shí)現(xiàn)一種我們平時(shí) 比較難實(shí)現(xiàn)的效果設(shè)定的屬性

例如：我們?cè)谑謾C(jī)布局的時(shí)候，一般我們是采用百分比來(lái)對(duì)網(wǎng)頁(yè)進(jìn)行自適應(yīng)的處理，也就是我們所說(shuō)的自適應(yīng)布局，我們可能有時(shí)會(huì)想要中效果就是，在左右內(nèi)縮加上1px

div{ padding-left:1px; padding-right:1px; }

但是采用自適應(yīng)布局會(huì)出現(xiàn)把屏幕撐開(kāi)，從而出現(xiàn)橫向滾動(dòng)條的效果，這個(gè)是我們?cè)谑謾C(jī)網(wǎng)頁(yè)中開(kāi)發(fā)的大忌，所以這個(gè)時(shí)候box-sizing就解決了我們的問(wèn)題，具體的文法詳見(jiàn) http://www.w3school.com.cn/cssref/pr_box-sizing.asp

從box-sizing這個(gè)屬性中我又聯(lián)想到還有另外一個(gè)與box有關(guān)的屬性就是box-shadow

box-shadow

這個(gè)屬性雖然在手機(jī)網(wǎng)頁(yè)中不是很常見(jiàn)，但是在網(wǎng)頁(yè)中確實(shí)比較常見(jiàn)的，原因是移動(dòng)端的網(wǎng)頁(yè)顯示的比較小，相對(duì)來(lái)說(shuō)比較簡(jiǎn)潔，但是這個(gè)效果卻是極好的，自從有了這個(gè)特性以后，望門(mén)就可以將網(wǎng)頁(yè)是的特定元素實(shí)現(xiàn)得更具立體感，完成以前的一些沒(méi)有辦法實(shí)現(xiàn)的效果，具體詳見(jiàn)： http://www.w3school.com.cn/cssref/pr_box-shadow.asp

base64編碼圖片代替URL圖片

由于在網(wǎng)頁(yè)加載的時(shí)候，沒(méi)一張圖片，都要進(jìn)行HTTP資源請(qǐng)求，所以將圖片進(jìn)行編碼，減小單次請(qǐng)求的流量，從而加快網(wǎng)站的加載速度，這個(gè)的實(shí)現(xiàn)可以使用在線的編碼工具即可，地址：

http://www.fishlee.net/Tools/GetImageBase64Code#codeResult

手機(jī)拍照和上傳圖片

在HTML5中支持一些移動(dòng)的新特性

移動(dòng)端特殊的事件

在HTML5出現(xiàn)之后，有一些新的事件

執(zhí)行事件的順序：touchstart>touchmove>touchend>touchcanel>click

從上面的順序我們不難分析出：在點(diǎn)擊的時(shí)候，click會(huì)發(fā)生延遲，這樣的延遲一般是300ms。

手機(jī)圖片和視頻上傳

移動(dòng)端不同的input對(duì)應(yīng)不同的鍵盤(pán)

ios —- android

type email

type url

type search

動(dòng)畫(huà)特效開(kāi)啟加速

默認(rèn)的移動(dòng)瀏覽器是不會(huì)開(kāi)啟動(dòng)畫(huà)效果硬件加速的，但是這樣的效果在低端的安卓手機(jī)中可能會(huì)出現(xiàn)意想不到的反效果

動(dòng)畫(huà)加速可以采用，下列代碼

.div { -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); /* Other transform properties here */}

設(shè)置placeholder時(shí)候 focus時(shí)候文字沒(méi)有隱藏

input:focus::-webkit-input-placeholder{ opacity: 0;}

android局部滾動(dòng)時(shí)隱藏原生滾動(dòng)條

::-webkit-scrollbar{ opacity: 0;}

除此之外，還有像HTML5 中的API和重力感應(yīng)事件等等的新特性的加入，使得HTML5網(wǎng)頁(yè)的開(kāi)發(fā)變得越發(fā)的多功能性，但是這些在今天的布局上局不講了，以后還會(huì)繼續(xù)討論下去

布局方法

在手機(jī)網(wǎng)頁(yè)開(kāi)發(fā)中，由于是基于webkit引擎開(kāi)發(fā)的，所以我們可以大量的使用HTML5特性進(jìn)行開(kāi)發(fā)，布局上為了達(dá)到適屏的效果，我們需要進(jìn)行采用的一般是百分比的布局，但是也是有一些布局較為特殊，這個(gè)我們就不討論了，后續(xù)會(huì)有一篇講解布局實(shí)例的文章，敬請(qǐng)期待

特別說(shuō)明如需轉(zhuǎn)載請(qǐng)注明出處，同時(shí)如果你覺(jué)得贊，請(qǐng)為我點(diǎn)一下“推薦”，你的鼓勵(lì)是我前進(jìn)的動(dòng)力

參考文獻(xiàn)

Meta 標(biāo)簽與搜索引擎優(yōu)化

移動(dòng)web問(wèn)題小結(jié)

用CSS開(kāi)啟硬件加速來(lái)提高網(wǎng)站性能

聲明：本網(wǎng)頁(yè)內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問(wèn)題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com