项目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（媒体查询） 媒体查询是可应用于 CSS 样式的简单过滤器。有了这些过滤器，我们可以根据设备呈现内容的特点轻松更改样式，包括显示屏类型、宽度、高度、方向甚至是分辨率。 例如，可以将打印必需的所有样式放在打印媒体查询中： link rel=stylesheet href=print.css media=print * 媒体查询属性及结果 属性 结果 min-width 当任意浏览器宽度大于查询中定义的值时适用的规则。 max-width 当任意浏览器宽度小于查询中定义的值时适用的规则。 min-height 当任意浏览器高度大于查询中定义的值时适用的规则。 max-height 当任意浏览器高度小于查询中定义的值时适用的规则。 orientation=portrait 高度大于或等于宽度的任意浏览器适用的规则。 orientation=landscape 宽度大于高度的任意浏览器适用的规则。 * CSS中的Media Query（媒体查询） 如： link rel=stylesheet media=(max-width: 640px) href=max-640px.css link rel=stylesheet media=(min-width: 640px) href=min-640px.css link rel=stylesheet media=(orientation: portrait) href=portrait.css link rel=stylesheet media=(orientation: landscape) href=landscape.css style @media (min-width: 500px) and (max-width: 600px) { h1 { color: fuchsia; } .desc:after { content: In fact, its between 500px and 600px wide.; } } /style * CSS中的Media Query（媒体查询） 根据前面代码，不同宽度的浏览器会采用不同的样式： 当浏览器宽度介于 0 像素和 640 像素之间时，系统将会应用 max-640px.css； 当浏览器宽度介于 500 像素和 600 像素之间时，系统将会应用 @media； 当浏览器宽度为 640 像素或大于此值时，系统将会应用 min-640px.css； 当浏览器宽度大于高度时，系统将会应用 landscape.css； 当浏览器高度大于宽度时，系统将会应用 portrait.css。 * 练习题 * 利用素材中banner.png制作出如下图所示的响应式布局效果。 上网查看哪些网站是采用响应式布局方式设计页面的。 * THANK YOU! 项目9 响应式布局-移动设备显示优化 《HTML5网页设计与实现》 芜湖职业技术学院