高招微课是由51CTO高招发起的，面向行业内的工程师以及程序员在线交流分享课堂，让我们用心去感受技术领域的干货。
Html5标准经过多年的修改，最终在2014年定稿，其移动优先的特点，响应式设计的思想吸引着大批开发者加入Html5的学习大军，51CTO高招本期邀请到的是51CTO学院特级讲师李炎恢,来为大家讲讲各位比较关注的方方面面。
提纲介绍
H5的三个方向
- Web设计
- 音频视频
- 游戏开发
响应式设计思路
- 三步设计法则
- 禁止屏幕缩放和等宽
- @media响应式
移动端图片和导航条的处理
一、Html5技术的三个方向
1.Web设计，比如网站设计、Web应用程序的界面设计，移动端Web或Web App的界面设计等等。
2.音频视频，HTML5对音频视频做了极大的支持和改善，很多应用都是基于这种流媒体开发的，当然也得益于目前国内带宽的爆发性增长。
3.游戏开发，基于HTML5绘图功能和强大的JavaScript推动了页面游戏的高速发展。
二、响应式设计思路
把握响应式设计的方向，要遵循三步设计法则，根据屏幕大小，先考虑移动端，其次考虑平板、小屏电脑等设备，***考虑大屏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发展趋势异常火爆，就业形势相对较好。自然，这个相对较好是相对与其他语言，并没有网上宣传的那么夸张。我个人认为，任何语言你有兴趣，自然会对它学习的更加深入，而不是跟风热门，因为热门的语言早晚会回归理性，只有深入一门你最感兴趣的，你才有较强的竞争力，而就业方面，自然不是问题。而当你有一门语言的深入接触，新技术基本都是用天和周进行学习的进度。所以，当你一周就学完一门新技术，你还会应接不暇吗？
2、H5并不是所有浏览器支持，怎么解决？
答：并不支持所有浏览器是很正常，淘汰那些不支持的浏览器就可以了，如果那些商家和用户使用那些淘汰了的浏览器，那我们淘汰那些商家和用户即可。低质量用户和商家是让一个科技公司倒闭的原因所在，迎合和兼容低质量客户，会增加大量成本，而不能使用新技术。最终使公司面临资金问题。对于淘汰用户和淘汰客户，这个问题，其实不管怎么争论都没有结果。因为运营的公司有它自己的难处，说淘汰客户自己也会面临生存危机。所以，这不是技术上的问题，而是公司在一开始的战略运营问题。科技公司倒闭率非常高，不是仅仅技术选择和客户选择能说得清楚的。
3、em、px、rem如何使用？
答：现在来看，如果做响应式布局，直接使用px即可，因为使用em和rem要不断做计算，比较麻烦。
4、postion相对布局和绝对布局总是用不好，有好的方法不？
答：一般来说，绝对定位不会用在最基本的上面，外部的话，基本不用定位，你要先设置一个相对点，然后相对某点进行定位。
看了大神的分享是否迫不及待想去学呢，别担心，我们为你准备了很多李老师的课程，课程传送通道，随时随地学前端！
本次活动由51CTO高招主办，关注下方公众号，获取更多精彩内容！
