高招微課是由51CTO高招發起的，面向行業內的工程師以及程序員在線交流分享課堂，讓我們用心去感受技術領域的干貨。

Html5標準經過多年的修改，最終在2014年定稿，其移動優先的特點，響應式設計的思想吸引著大批開發者加入Html5的學習大軍，51CTO高招本期邀請到的是51CTO學院特級講師李炎恢,來為大家講講各位比較關注的方方面面。

提綱介紹

H5的三個方向

• Web設計
• 音頻視頻
• 游戲開發

響應式設計思路

• 三步設計法則
• 禁止屏幕縮放和等寬
• @media響應式

移動端圖片和導航條的處理

一、Html5技術的三個方向

1.Web設計，比如網站設計、Web應用程序的界面設計，移動端Web或Web App的界面設計等等。

2.音頻視頻，HTML5對音頻視頻做了極大的支持和改善，很多應用都是基于這種流媒體開發的，當然也得益于目前國內帶寬的爆發性增長。

3.游戲開發，基于HTML5繪圖功能和強大的JavaScript推動了頁面游戲的高速發展。

二、響應式設計思路

[[167513]]

把握響應式設計的方向，要遵循三步設計法則，根據屏幕大小，先考慮移動端，其次考慮平板、小屏電腦等設備，***考慮大屏PC。

1、三步設計法則

***步、按照移動端設備進行設計，因為移動端的設計需求往往是極簡化的，不會存放太多的內容，只保留核心內容；第二步、按照平板和小屏電腦的分辨率去增加尺寸；第三步、考慮大屏PC電腦的精細設計。因為從小到大，比較容易；從大到小反而有諸多限制。

2、禁止屏幕縮放及等寬

首先要禁止屏幕自動縮放，并且使頁面和屏幕等寬操作，這樣字體和布局就不會因為縮放導致縮小看不清。

3、@media響應式樣式

需要通過Css3的@media命令對不同尺寸分辨率的設備進行字體和樣式的更改，讓頁面在這個分辨率下更合適。圖片則是通過另一種方法實現，直接給需要響應式圖片上設置一個***寬度100%即可。

三、移動端圖片的尺寸設計

響應式圖片已經清楚怎么設計了？但是圖片應該做多大呢？因為不同的移動端設備分辨率都是不同的，在這種情況下設計一張不失真的圖片就要講究一定的技巧。

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

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

四、移動端響應式導航條設計

   導航條往往很長，在PC端無須考慮太多，但是移動端***，顯示不了太多的導航內容。這個時候，就需要一點技巧，既要保持頁面的簡潔，又要體現出導航條的價值。

在導航不太多的情況，可以采用減少導航字體內容或隱藏部分內容的方式讓導航在移動端顯示出來。如果導航內容較多，可以采用JavaScript單獨做一個導航列表默認隱藏起來，當點擊這個區域的時候顯示出所有導航。Bootstrap庫支持這個功能。

QA環節

1、H5的發展趨勢，以及就業形勢，新技術不斷涌現，有點應接不暇，比較迷茫，該怎么辦？

答：HTML5發展趨勢異?；鸨蜆I形勢相對較好。自然，這個相對較好是相對與其他語言，并沒有網上宣傳的那么夸張。我個人認為，任何語言你有興趣，自然會對它學習的更加深入，而不是跟風熱門，因為熱門的語言早晚會回歸理性，只有深入一門你最感興趣的，你才有較強的競爭力，而就業方面，自然不是問題。而當你有一門語言的深入接觸，新技術基本都是用天和周進行學習的進度。所以，當你一周就學完一門新技術，你還會應接不暇嗎？

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

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

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

答：現在來看，如果做響應式布局，直接使用px即可，因為使用em和rem要不斷做計算，比較麻煩。

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

答：一般來說，絕對定位不會用在最基本的上面，外部的話，基本不用定位，你要先設置一個相對點，然后相對某點進行定位。

看了大神的分享是否迫不及待想去學呢，別擔心，我們為你準備了很多李老師的課程，課程傳送通道，隨時隨地學前端！

本次活動由51CTO高招主辦，關注下方公眾號，獲取更多精彩內容！