具体操作ຫໍສະໝຸດ 创建HTML5文件
编写样式代码
测试效果
总结拓展
响应式布局的优点是面对不同分辨率设 备灵活性强；能够快捷解决多设备显示 适应问题。
不足是兼容各种设备工作量大，效率低
下；代码累赘，会出现隐藏无用的元素， 加载时间加长。
所以在页面布局时要选择一种折衷的设
计解决方案。
谢谢观看
知识点
html5/css3响应式页面设计流程：
第一步：确定需要兼容的设备类型、屏幕尺寸；
第二步：制作线框原型；针对确定的尺寸分别制作不同的线框原型， 考虑不同尺寸下，页面的布局变化，针对特殊的环境作特殊化的设计。
第三步：测试线框原型；将图片导入相应的设备进行简单测试，尽可
能早发现可访问性、可读性等方面存在的问题。 第四步：视觉设计；移动设备的屏幕像素密度与传统电脑屏幕不一样， 在设计的时候要保证内容文字的可读性，控件可点击区域的面积等。 第五步：前端实现；响应式设计的页面由于页面布局、内容尺寸发生 变化，需要前端开发人员和设计师多沟通。
02 CSS3
5 响应式布局原理，兼容性处理
目 录
• • • •
任务介绍
知识点 具体操作 总结拓展
任务介绍
通过操作演示，让同学们掌握HTML5网页的响应式布局原理 以及兼容性处理方法。
知识点
响应布局：Ethan Marcotte在2010年5月提出的一个概念。就是一个网站能够兼 容多个终端——而不是每个终端做一个特定的版本。 这个概念是为解决移动互联网浏览而诞生，响应式布局可以为不同终端的用户提 供更加舒适的界面和更好的用户体现。 CSS3中的Media Query(媒介查询)解决了不同设备间的兼容问题。 响应布局语法结构： @media 设备名(媒体的类型) and(设备选取条件) and(设备选取条件) 其中：设备名包括screen、print等。 and关键字用来连接条件（其他关键字not、only）。