项目9响应式布局-移动设备显示优化剖析.ppt

芜湖职业技术学院 * 项目9响应式布局-移动设备显示优化 《HTML5网页设计与实现》 『作 者』徐 琴 『时 间』2015.6 响应式布局-移动设备显示优化——学习情境 现在使用移动终端的用户越来越多，小黄发现之前设计的网页在稍大显示器宽度，如1280px上显示效果良好，但是在小屏幕显示器上，如手机、ipad上，网页打开后效果就不那么美观了，会让用户产生很糟糕的体验。 小黄需要学习响应式布局的方法，将页面优化，使得页面能够自适应屏幕的大小采取不同的显示方式，也就是让它能够兼容多个移动终端。 * 响应式布局的概念 响应式布局（这一概念最初是由 Ethan Marcotte 在’A List Apart’中提出的）回应了用户及其所用设备的需求。版式会因根据设备的大小和功能而变化。例如，手机可能会以单列视图的形式呈现内容，而同样的内容可能会以双列的形式呈现在平板电脑上。 * 设置viewport 对于针对各种设备优化过的网页，其文档标头中必须包含viewport元视口元素。元视口代码会指示浏览器如何对网页尺寸和缩放比例进行控制。在开发时，我们把下面代码复制到head标签中： meta name=viewport content=width=device-width, initial-scale=1.0 * CSS中的Media Query（媒体查询） 媒体查询是可应用于 C