高招微課是由51CTO高招發(fā)起的，面向行業(yè)內(nèi)的工程師以及程序員在線交流分享課堂，讓我們用心去感受技術(shù)領(lǐng)域的干貨。

Html5標(biāo)準(zhǔn)經(jīng)過(guò)多年的修改，最終在2014年定稿，其移動(dòng)優(yōu)先的特點(diǎn)，響應(yīng)式設(shè)計(jì)的思想吸引著大批開發(fā)者加入Html5的學(xué)習(xí)大軍，51CTO高招本期邀請(qǐng)到的是51CTO學(xué)院特級(jí)講師李炎恢,來(lái)為大家講講各位比較關(guān)注的方方面面。

提綱介紹

H5的三個(gè)方向

• Web設(shè)計(jì)
• 音頻視頻
• 游戲開發(fā)

響應(yīng)式設(shè)計(jì)思路

• 三步設(shè)計(jì)法則
• 禁止屏幕縮放和等寬
• @media響應(yīng)式

移動(dòng)端圖片和導(dǎo)航條的處理

一、Html5技術(shù)的三個(gè)方向

1.Web設(shè)計(jì)，比如網(wǎng)站設(shè)計(jì)、Web應(yīng)用程序的界面設(shè)計(jì)，移動(dòng)端Web或Web App的界面設(shè)計(jì)等等。

2.音頻視頻，HTML5對(duì)音頻視頻做了極大的支持和改善，很多應(yīng)用都是基于這種流媒體開發(fā)的，當(dāng)然也得益于目前國(guó)內(nèi)帶寬的爆發(fā)性增長(zhǎng)。

3.游戲開發(fā)，基于HTML5繪圖功能和強(qiáng)大的JavaScript推動(dòng)了頁(yè)面游戲的高速發(fā)展。

二、響應(yīng)式設(shè)計(jì)思路

[[167513]]

把握響應(yīng)式設(shè)計(jì)的方向，要遵循三步設(shè)計(jì)法則，根據(jù)屏幕大小，先考慮移動(dòng)端，其次考慮平板、小屏電腦等設(shè)備，***考慮大屏PC。

1、三步設(shè)計(jì)法則

***步、按照移動(dòng)端設(shè)備進(jìn)行設(shè)計(jì)，因?yàn)橐苿?dòng)端的設(shè)計(jì)需求往往是極簡(jiǎn)化的，不會(huì)存放太多的內(nèi)容，只保留核心內(nèi)容；第二步、按照平板和小屏電腦的分辨率去增加尺寸；第三步、考慮大屏PC電腦的精細(xì)設(shè)計(jì)。因?yàn)閺男〉酱螅容^容易；從大到小反而有諸多限制。

2、禁止屏幕縮放及等寬

首先要禁止屏幕自動(dòng)縮放，并且使頁(yè)面和屏幕等寬操作，這樣字體和布局就不會(huì)因?yàn)榭s放導(dǎo)致縮小看不清。

3、@media響應(yīng)式樣式

需要通過(guò)Css3的@media命令對(duì)不同尺寸分辨率的設(shè)備進(jìn)行字體和樣式的更改，讓頁(yè)面在這個(gè)分辨率下更合適。圖片則是通過(guò)另一種方法實(shí)現(xiàn)，直接給需要響應(yīng)式圖片上設(shè)置一個(gè)***寬度100%即可。

三、移動(dòng)端圖片的尺寸設(shè)計(jì)

響應(yīng)式圖片已經(jīng)清楚怎么設(shè)計(jì)了？但是圖片應(yīng)該做多大呢？因?yàn)椴煌囊苿?dòng)端設(shè)備分辨率都是不同的，在這種情況下設(shè)計(jì)一張不失真的圖片就要講究一定的技巧。

以蘋果的iphone手機(jī)為例，其它手機(jī)與之類似。iphone3gs的分辨率是：320x480，它的縮小比例是1倍，所以它的邏輯分辨率還是320x480。那么iphone4/4s分辨率是640x960,但是它屏幕大小和iphone3gs是一樣的，均為3.5寸。所以，它的縮小比例是2倍，邏輯分辨率就是320x480。

iphone6 plus，分辨率高達(dá)1242x2208，而它的渲染分辨率為1080x1920，它的縮小比例是3倍，它的邏輯分辨率是414x736。為了兼容所有iphone手機(jī)并使圖片滿屏不失真，只要大于邏輯分辨率的寬度即可，如果不考慮平板電腦和PC的話，大于414即可。

四、移動(dòng)端響應(yīng)式導(dǎo)航條設(shè)計(jì)

   導(dǎo)航條往往很長(zhǎng)，在PC端無(wú)須考慮太多，但是移動(dòng)端***，顯示不了太多的導(dǎo)航內(nèi)容。這個(gè)時(shí)候，就需要一點(diǎn)技巧，既要保持頁(yè)面的簡(jiǎn)潔，又要體現(xiàn)出導(dǎo)航條的價(jià)值。

在導(dǎo)航不太多的情況，可以采用減少導(dǎo)航字體內(nèi)容或隱藏部分內(nèi)容的方式讓導(dǎo)航在移動(dòng)端顯示出來(lái)。如果導(dǎo)航內(nèi)容較多，可以采用JavaScript單獨(dú)做一個(gè)導(dǎo)航列表默認(rèn)隱藏起來(lái)，當(dāng)點(diǎn)擊這個(gè)區(qū)域的時(shí)候顯示出所有導(dǎo)航。Bootstrap庫(kù)支持這個(gè)功能。

QA環(huán)節(jié)

1、H5的發(fā)展趨勢(shì)，以及就業(yè)形勢(shì)，新技術(shù)不斷涌現(xiàn)，有點(diǎn)應(yīng)接不暇，比較迷茫，該怎么辦？

答：HTML5發(fā)展趨勢(shì)異常火爆，就業(yè)形勢(shì)相對(duì)較好。自然，這個(gè)相對(duì)較好是相對(duì)與其他語(yǔ)言，并沒(méi)有網(wǎng)上宣傳的那么夸張。我個(gè)人認(rèn)為，任何語(yǔ)言你有興趣，自然會(huì)對(duì)它學(xué)習(xí)的更加深入，而不是跟風(fēng)熱門，因?yàn)闊衢T的語(yǔ)言早晚會(huì)回歸理性，只有深入一門你最感興趣的，你才有較強(qiáng)的競(jìng)爭(zhēng)力，而就業(yè)方面，自然不是問(wèn)題。而當(dāng)你有一門語(yǔ)言的深入接觸，新技術(shù)基本都是用天和周進(jìn)行學(xué)習(xí)的進(jìn)度。所以，當(dāng)你一周就學(xué)完一門新技術(shù)，你還會(huì)應(yīng)接不暇嗎？

2、H5并不是所有瀏覽器支持，怎么解決？

答：并不支持所有瀏覽器是很正常，淘汰那些不支持的瀏覽器就可以了，如果那些商家和用戶使用那些淘汰了的瀏覽器，那我們淘汰那些商家和用戶即可。低質(zhì)量用戶和商家是讓一個(gè)科技公司倒閉的原因所在，迎合和兼容低質(zhì)量客戶，會(huì)增加大量成本，而不能使用新技術(shù)。最終使公司面臨資金問(wèn)題。對(duì)于淘汰用戶和淘汰客戶，這個(gè)問(wèn)題，其實(shí)不管怎么爭(zhēng)論都沒(méi)有結(jié)果。因?yàn)檫\(yùn)營(yíng)的公司有它自己的難處，說(shuō)淘汰客戶自己也會(huì)面臨生存危機(jī)。所以，這不是技術(shù)上的問(wèn)題，而是公司在一開始的戰(zhàn)略運(yùn)營(yíng)問(wèn)題?？萍脊镜归]率非常高，不是僅僅技術(shù)選擇和客戶選擇能說(shuō)得清楚的。

3、em、px、rem如何使用？

答：現(xiàn)在來(lái)看，如果做響應(yīng)式布局，直接使用px即可，因?yàn)槭褂胑m和rem要不斷做計(jì)算，比較麻煩。

4、postion相對(duì)布局和絕對(duì)布局總是用不好，有好的方法不？

答：一般來(lái)說(shuō)，絕對(duì)定位不會(huì)用在最基本的上面，外部的話，基本不用定位，你要先設(shè)置一個(gè)相對(duì)點(diǎn)，然后相對(duì)某點(diǎn)進(jìn)行定位。

看了大神的分享是否迫不及待想去學(xué)呢，別擔(dān)心，我們?yōu)槟銣?zhǔn)備了很多李老師的課程，課程傳送通道，隨時(shí)隨地學(xué)前端！

本次活動(dòng)由51CTO高招主辦，關(guān)注下方公眾號(hào)，獲取更多精彩內(nèi)容！