html5、css3及响应式设计入门

一、响应式设计的定义

　　将三种已有的开发技巧（弹性网格布局、弹性图片、媒体和媒体查询）整合起来，命名为响应式网页设计。真正的响应式设计方法不仅仅只是根据视口大小改变网页布局。相反，它是要从整体上颠覆我们当前

设计网页的方法。以往我们先是针对桌面电脑进行固定宽度设计，然后将其缩小并针对小屏幕进行内容重排；现在我们应该首先针对小屏幕进行设计，然后逐步增强针对大屏幕的设计和内容（渐进增强）。

二、H5和CSS3

　　HTML5提供了更多语义化标签，减少网页加载时间；H5在表单提交等页面交互中极大改善，减少了复杂的JS代码，允许我们创建更简洁快速代码；

　　CSS3是附加的模块式构造，不是标准。它不会破坏不能解析它的浏览器中的任何东西

　　CSS3的媒体查询是响应式设计不可或缺的组成部分，它的其他功能如渐变、投影、字体、动画和变换比js简洁。

三、调试测试

　　1.改变浏览器窗口大小能完成大多数测试

　　2.第三方插件和浏览器扩展可供选择，通过它们可以将当前浏览器窗口或视口设定为指定像素。必要时，还可以自动将当前浏览器窗口或视口切换成为默认大小（如1024×768 像素）。这样你就可以轻松地测试不同屏幕视口尺寸下的网站效果。

　　注：响应式网页设计中，不要迷恋像素（px）单位，而使用相对度量单位（em或百分比）。

　　　　视口是指浏览器窗口内的内容区域，不包含工具栏、标签栏等也就是网页实际显示的区域；

　　　　屏幕尺寸指的是设备的物理显示区域