?

說實(shí)話，我們這次開發(fā)移動(dòng)端的項(xiàng)目，整個(gè)項(xiàng)目組的人都是第一次，最初立項(xiàng)的時(shí)候?yàn)槭沁x擇native app和web app還爭(zhēng)論了一番，最后綜合考慮，我們選擇了web（我們選擇了h5）開發(fā)。但從這兩種開發(fā)模式的特點(diǎn)來說，從它們誕生之日起就開始了不斷的爭(zhēng)論，孰好孰壞，本文不作探討，只是簡(jiǎn)單羅列下本人開發(fā)遇到的問題和最終的解決方案。

?

1.?響應(yīng)式web設(shè)計(jì)

說到這個(gè)，移動(dòng)開發(fā)面對(duì)的屏幕尺寸那叫一個(gè)豐富，其中安卓陣營(yíng)就夠讓人頭痛的。我們?cè)赑C端常用的兩種布局方式就是固定布局和彈性布局，前者設(shè)置一個(gè)絕大多數(shù)電腦能正常顯示的固定寬度居中顯示，后者則采用百分比。關(guān)于這兩者討論的文章很多，有興趣的自己查閱下，我今天要介紹的就是相信你已經(jīng)聽過的”響應(yīng)式布局”，響應(yīng)式布局意味著媒體查詢，這個(gè)在css2就已經(jīng)出現(xiàn)的東西隨著html5、css3的到來又增添了新的生機(jī)。

響應(yīng)式web設(shè)計(jì)并非新的技術(shù)，只不過將已有的開發(fā)技巧（彈性布局、彈性圖片和媒體查詢等）整合在了一起，并命了這個(gè)聽起來很牛X的名字——響應(yīng)式web設(shè)計(jì)。猶如當(dāng)年的Ajax一樣，將已有的技術(shù)重新組合發(fā)揮新的作用。

（1）.媒體查詢初探。媒體查詢并非新出現(xiàn)的技術(shù)，如下：

其中就使用了媒體查詢，通過 標(biāo)簽的media屬性為樣式表指定了設(shè)備類型，當(dāng)然CSS3時(shí)代的媒體查詢更加豐富。

發(fā)現(xiàn)了他們的區(qū)別嗎？對(duì)，不只是針對(duì)設(shè)備進(jìn)行適配，而且加了一個(gè)條件，就是當(dāng)設(shè)備縱向放置的時(shí)候才匹配，咱們?cè)倏匆粋€(gè)。

大家會(huì)發(fā)現(xiàn)我們又拓展了一個(gè)條件，對(duì)，就是當(dāng)設(shè)備屏幕的寬度大于960px才會(huì)加載style.css樣式文件。我們究竟有哪些特性是可以被探測(cè)到的呢？下面列了一部分供大家參考（參考自http://www.w3.org/html/ig/zh/wiki/CSS3媒體查詢）：
- width 視口寬度
- height 視口高度
- device-width 設(shè)備屏幕的寬度
- device-height 設(shè)備屏幕的高度
- orientation 檢測(cè)屏幕處于橫屏還是豎屏
- aspect-ratio 基于視口的寬高比例
- device-aspect-ratio 基于設(shè)備屏幕的寬高比
- color 顏色的位數(shù)，如min-color：32 匹配設(shè)備是否有32位或以上的顏色
- color-index 設(shè)備的顏色索引表中的顏色數(shù)
- monochrome 檢測(cè)單色振緩沖區(qū)中每像素使用的位數(shù)。為非負(fù)數(shù)，如monochrome：3
- resolution 檢測(cè)屏幕或打印機(jī)的分辨率，如min-resolution：300dpi(dpi后面會(huì)介紹)，也可以是每厘米像素點(diǎn)的度量值，如min-resolution：120dpcm
- scan 掃描方式，值為progressive（逐行掃描）、interlace（隔行掃描）
- grid 檢測(cè)輸出設(shè)備是網(wǎng)格設(shè)備還是位圖設(shè)備

創(chuàng)建媒體查詢時(shí)，上述特性（scan和grid不行）都可以加上min和max前綴創(chuàng)建媒體查詢的范圍。除了link標(biāo)簽?zāi)軌蜻M(jìn)行媒體查詢，是不是還有其它的呢，答案是Yes 。html中的meta標(biāo)簽，此前我們常用的應(yīng)該是這個(gè)

但是現(xiàn)在我們要說的不是這個(gè)，而是這個(gè)：
在多數(shù)ios和android設(shè)備的瀏覽器都支持viewport meta元素覆蓋默認(rèn)的畫布縮放設(shè)置。在標(biāo)簽中插入meta標(biāo)簽，設(shè)置相應(yīng)屬性即可，如上代碼，name=”viewport” content中width=device-width表示瀏覽器頁面寬度等于設(shè)備寬度（同理可以設(shè)置高度，也可指定具體值），initial-scale=1表示頁面不縮放保持，mininum-scale=1和maximum-scale=1表示允許用戶最小縮小至原大小和擴(kuò)大到原大小（實(shí)際就是不讓縮放^^），user-scaleable=no 表示禁止縮放, target- densitydpi = high-dpi表示適配高分辨率的屏幕，還可以取值為dpi_value | device-dpi| high-dpi | medium-dpi | low-dpi，后面的四個(gè)定性，第一個(gè)定量，即dpi_value是DPI值，device-dpi是使用設(shè)備原本的 dpi 作為目標(biāo) dp，不發(fā)生默認(rèn)縮放，而后面的三個(gè)是指dpi取值在一定范圍的表示。這里我們先介紹前文出現(xiàn)過的一個(gè)名詞dpi，所表示的是每英寸所擁有的像素（pixel）數(shù)目，數(shù)值越高，即代表顯示屏能夠以越高的密度顯示圖像。當(dāng)達(dá)到人眼的極限分辨率時(shí)，喬幫主給它取了一個(gè)很高端的名字——Retina。那么目前市面的手機(jī)分辨率是怎樣的一個(gè)分布呢，ios大家都知道的，從iphone4時(shí)代開始就已經(jīng)是Retina屏了，至于Android可以看下此前Google官方公布的數(shù)據(jù)：

從上面可以看出，高分屏和超分屏已經(jīng)是主流了，具體的適配范圍還是看各自的項(xiàng)目和定位吧。

講了這么多，有人可能會(huì)疑惑為什么這些都不是用在CSS中的？別急，慢慢來，現(xiàn)在就介紹如何在樣式中運(yùn)用，按照上述屏幕分辨率的四種劃分，我們可以看到基本可以舍棄ldpi了。
/* 中分辨率屏幕 */

/*高分辨率屏幕*/

/*超高分辨率屏幕（傳說中的Retina屏）*/

上面就是在css中的用法，把我們需要的css代碼包含在大括號(hào)中就能用了，是不是很方便的樣子%>_<%。當(dāng)然我們還可以用到之前提供的幾個(gè)特性，如下：

針對(duì)視口寬度不大于768像素的情況加載大括號(hào)中的樣式。
雖然我們可以把設(shè)備的分辨率可以分為這幾類，但是屏幕的尺寸實(shí)在太多，如果針對(duì)每一種尺寸寫一種樣式，我覺得設(shè)計(jì)師和前端面不用干別的了，因?yàn)殚_發(fā)成本實(shí)在太大，而且沒有必要，我們只需要針對(duì)絕大多數(shù)的設(shè)備結(jié)合媒體查詢和彈性布局來調(diào)整，減少開發(fā)成本。

2.CSS3新增屬性

現(xiàn)在移動(dòng)端兩大陣營(yíng)ios和android都是基于webkit內(nèi)核的，而webkit內(nèi)核對(duì)CSS3的支持走在了前面，在這里我們可以拋開翔一樣的ie家族，盡情享受多彩絢麗CSS3世界吧！

CSS3給我們帶來了如：文字陰影（text-shadow）、盒子陰影（box-shadow）、圓角（border-radius）、背景漸變（background: linear-gradient(#000, #fff)）、2D變換（transition）、動(dòng)畫（animation）等大家耳熟能詳?shù)某Ｓ脤傩酝?#xff0c;還有如-webkit-mask、-webkit-text-stroke、-webkit-nbsp-mode、-webkit-tap-highlight-color、-webkit-box-reflect、-webkit-marquee、-webkit-box等webkit內(nèi)核私有屬性，至于這些屬性其他瀏覽器支持程度，有興趣的可以自己研究研究，這上面的每一個(gè)屬性都有自己的使用場(chǎng)景，就看如何靈活運(yùn)用。今天我不全部列出，僅簡(jiǎn)單介紹幾個(gè)。

（1）、介紹的第一個(gè)就是display：-webkit-box，我們知道元素大致分為內(nèi)聯(lián)元素、塊狀元素和介于兩者之間的元素，當(dāng)然還有inline-table、table-cell等神馬的，那么display: -webkit-box怎么用呢，什么舉個(gè)應(yīng)用場(chǎng)景，對(duì)于下圖所示的情況，父元素被1、2、3均分，且2和1之間間隔10px，你會(huì)怎么做？

這時(shí)候我們可以試試新的display:-webkit-box，另外還有如下屬性配合使用，
-webkit-box-orient子元素排列方向 horizontal | vertical | inline-axis | block-axis | inherit，其中默認(rèn)值是inline-axis，即橫向排列
-webkit-box-flex 子元素之間比例，僅作一個(gè)系數(shù)
-webkit-box-direction 子元素排列順序 normal | reverse | inherit，其中默認(rèn)值是normal
-webkit-box-flex-group 以組為單位的流體系數(shù)
-webkit-box-ordinal-group 以組為單位的子元素排列方向
-webkit-box-lines 子元素是否換行，類似word-wrap和word-break的作用
-webkit-box-align 子元素垂直方向的對(duì)其方式
-webkit-box-pack 子元素水平方向的對(duì)其方式
這些配合使用的屬性我們?nèi)磕J(rèn)即可

CSS：

HTML：

怎么理解上面的代碼呢，父親有一塊地，要分給兄弟幾個(gè)，除去老大和老二之間的分割線所占的那塊，剩下的部分均分的分?jǐn)?shù)由li的兄弟個(gè)數(shù)和box-flex的總數(shù)確定，現(xiàn)在一共三兄弟，每兄弟的box-flex都是1，所以就總分?jǐn)?shù)=1*1+1*1+1*1=3。
如果代碼稍作修改

那么現(xiàn)在老二的box-flex是2了，總分?jǐn)?shù)就是1*1+1*2+1*1=4，其中老大老三各占一份，老二占兩份，顯示效果如下：

（2）、-webkit-text-size-adjust:none;我做項(xiàng)目的時(shí)候發(fā)現(xiàn)一個(gè)問題，就是當(dāng)豎屏的屏的時(shí)候顯示效果不錯(cuò)，但是當(dāng)橫屏的時(shí)候，字體會(huì)變大，無論你怎么設(shè)置字體大小都無效，后來才知道是text-size-adjust（https://developer.mozilla.org/en-US/docs/CSS/text-size-adjust）在作怪。瀏覽器默認(rèn)會(huì)根據(jù)當(dāng)前屏幕和內(nèi)容作調(diào)整，在webkit內(nèi)核的瀏覽器中只需要-webkit-text-size-adjust:none就禁止自動(dòng)調(diào)整，至于是否全局活局部使用看自己的項(xiàng)目需求。

如上圖所示，很明顯當(dāng)手機(jī)由豎屏轉(zhuǎn)向橫屏的時(shí)候主題區(qū)域的文字自動(dòng)變大，跟你自己設(shè)置的大小無關(guān)，當(dāng)你設(shè)置了-webkit-text-size-adjust:none后橫屏的效果是這樣的

這樣，字體的大小就有我們自己設(shè)置，是可控的。

（3）、字級(jí)單位。

我們常用的有px、pt、百分比、em等，很慚愧，我最近才知道有rem，而且是個(gè)相當(dāng)不錯(cuò)的朋友。前面的幾個(gè)單位大家都比較熟悉，不知道有沒有和我一樣小白的才知道rem的呢，我們就介紹一下這個(gè)新朋友，它是隨著css3來到這個(gè)世界。

我們之前用em、百分比的時(shí)候遇到的問題就是計(jì)算，而且當(dāng)嵌套的層級(jí)太多時(shí)就會(huì)非常難以把控，而用px則被固定死了，現(xiàn)在我們用rem完全不用擔(dān)心這個(gè)問題，因?yàn)閞em的參照對(duì)象只有根節(jié)點(diǎn)。我們只需設(shè)置根節(jié)點(diǎn)的大小，所有子節(jié)點(diǎn)都只需參照它來設(shè)計(jì)就可以，下面是px、em、百分比和pt的對(duì)比

根據(jù)上面的圖表（紅色部分為默認(rèn)，當(dāng)然不同的瀏覽器渲染默認(rèn)值不一樣，具體還需各位實(shí)測(cè)）可以看出，我們只需設(shè)置html根元素字體大小為75%，對(duì)應(yīng)的px值就是12，這樣我們可以很方便的設(shè)置頁面的寬高和字體大小，當(dāng)然單位是rem，這樣參考對(duì)象才會(huì)永遠(yuǎn)是html而不是父元素，當(dāng)需要變化的時(shí)候，只需改變html的大小其他的元素都會(huì)相應(yīng)變化，方便極了。

3、HTML5新增標(biāo)簽。

在html5中新增量很多標(biāo)簽，加強(qiáng)連html標(biāo)簽的語義化，如等等，這些標(biāo)簽都各自有自己大意義，不再僅僅是span和div，雖然html4中也有很多語義化的標(biāo)簽，但是不如html5豐富。除了這些新增的標(biāo)簽，還有一些此前就有的標(biāo)簽，但是類別新增，最具代表性的就是表單form，而本文要介紹的就是form。

以上除了type=text外，其他的都是新增的，如果瀏覽器支持這些屬性的話，就會(huì)自動(dòng)調(diào)用相應(yīng)組件，如在移動(dòng)設(shè)備中type=number/email/text時(shí)，瀏覽器會(huì)調(diào)用不同版面的鍵盤，這樣加快用戶的輸入，體驗(yàn)也更美好，如下

如果是type=range則會(huì)出現(xiàn)這樣的組件，供選擇范圍

如果是type=color則會(huì)出現(xiàn)顏色選擇器

如果是type=date則出現(xiàn)日期選擇器

如果是type=search,則在輸入時(shí)候出現(xiàn)一個(gè)一鍵清除的按鈕，點(diǎn)擊輸入的文字全部清除

另外，除了input的type新增量類別，還增加一些很實(shí)用的屬性，如placeholder，我們知道，input中我們常常會(huì)默認(rèn)一些文案，當(dāng)用戶輸入的時(shí)候會(huì)自動(dòng)清除，html5之前我們是靠javascript實(shí)現(xiàn)的，但是有了html5，我們可以輕松實(shí)現(xiàn)，只需要placeholder=”默認(rèn)文案” 如下

當(dāng)然新增的不只有placeholder，還有譬如可以關(guān)閉默認(rèn)大小寫的autocapitalize=”off”，有興趣的童鞋可以研究研究。

4、選擇符

選擇符大致分為元素選擇符、關(guān)系選擇符、屬性選擇符、偽類選擇符、偽對(duì)象選擇符，在PC端，我們用的最多的就是元素選擇符、關(guān)系選擇符和屬性選擇符如
div{……}、div.class{……}、div#id{……}、div span{……}、div[class="classname"]{}

但是由于ie某些瀏覽器的原因，很多好用的選擇符不能廣泛使用，如ie6只支持a標(biāo)簽的偽類選擇符，但是在移動(dòng)端，我們就不用在意這些了，絕大多數(shù)選擇符都已經(jīng)可以使用了，如前文已經(jīng)用到的

.item_list li:first-child{background: #f00}
.item_list li:nth-child(2){margin-left: 10px;background: #ff0;-webkit-box-flex:1;}
.item_list li:last-child{background: #c96}

偽類選擇符和偽對(duì)象選擇符有很多，靈活運(yùn)用可以減少很多不必要的代碼。如E:nth-child(n){ …… }、E:nth-of-type(n){ …… }、E:disabled{ …… }、E:empty{ …… }、E:first-letter/E::first-letter{ …… }、E:first-line/E::first-line{ …… }、E:before/E::before{ ……}、E:after/E::after{…… }、E::selection{ …… }等，這里不細(xì)說。

5、一些小的建議

（1）、如何禁止用戶旋轉(zhuǎn)設(shè)備
這里其實(shí)是想告訴你在瀏覽器里辦不到，因?yàn)榻归_發(fā)者阻止瀏覽器的orientationchange事件。

（2）、禁用自動(dòng)識(shí)別電話號(hào)碼
在開發(fā)項(xiàng)目的時(shí)候，我們經(jīng)常會(huì)用到一些數(shù)字或者就是電話號(hào)碼，但是又不想系統(tǒng)自動(dòng)識(shí)別讓用戶可以直接撥打，我們只需要在標(biāo)簽之間加入即可，但是有些特殊情況我們需要可以用戶直接撥打，如

沒關(guān)系，像這樣010-52918772即可，系統(tǒng)會(huì)自動(dòng)識(shí)別，用戶點(diǎn)擊即可選擇撥號(hào)。

（3）盒子邊框溢出
當(dāng)我們指定了一個(gè)塊級(jí)元素時(shí)，并且為其定義了邊框，設(shè)置了其寬度為100％。按照盒子模型，就會(huì)發(fā)現(xiàn)該元素的左右邊框各1個(gè)像素會(huì)溢了，導(dǎo)致出現(xiàn)橫向滾動(dòng)條，這時(shí)候我們可以為其添加-webkit-box-sizing:border-box用來指定該盒子的大小包括邊框的寬度。

（4）、ios數(shù)字顏色樣式超過9位后失控
這個(gè)問題我不知道該怎么描述，就是在ios中，當(dāng)數(shù)字超過9位數(shù)時(shí)，瀏覽器會(huì)給這個(gè)數(shù)字默認(rèn)加上一個(gè)顏色，無論你設(shè)置什么顏色都無效。

（5）、iOS可禁止用戶在新窗口打開頁面
在項(xiàng)目開發(fā)中，有時(shí)我們需要某個(gè)鏈接在當(dāng)前頁面打開，這樣需要禁止用戶在新窗口打開頁面，我們可以使用a標(biāo)簽的target=”_self”指定在當(dāng)前頁面打開，但是在iOS中長(zhǎng)按鏈接一段時(shí)間后，系統(tǒng)會(huì)彈出一個(gè)對(duì)話框，用戶可以通過點(diǎn)擊”在新頁面中打開”來在新窗口打開頁面，這樣我們指定的target屬性就失效了，但是可以通過指定當(dāng)前元素的-webkit-touch-callout屬性為none來禁止iOS彈出這些按鈕。

（6）、CSS3繪圖和CSS3動(dòng)畫
在html5和css3的世界里，很多圖片都是多余的，我們可以盡情發(fā)揮自己的想象，讓CSS3替代不必要的圖片不必要的JavaScript，另外做CSS3動(dòng)畫時(shí)最好將動(dòng)畫代碼提取出來單獨(dú)命名。

轉(zhuǎn)載于:https://www.cnblogs.com/zonglonglong/p/4368622.html

與50位技術(shù)專家面對(duì)面20年技術(shù)見證，附贈(zèng)技術(shù)全景圖

總結(jié)

以上是生活随笔為你收集整理的浅淡HTML5移动Web开发的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。