模块二 响应式Web设计 (1).pptx

主讲：周怡燕HTML5+CSS3

响应式WEB应用开发

模块二响应式Web设计响应式Web设计基础02百分比布局03栅格系统04认识响应式web设计01弹性盒子05项目实施05媒体查询05

项目二UShare首页每日秒杀模块

认识响应式web设计/01

认识响应式web设计5响应式web设计简介移动设备和桌面设备的网页分开来设计？不同品牌之间甚至同类品牌之间都存在不同类型的屏幕尺寸，设计师分开来设计？响应式web设计

初识响应式web设计6设计理念响应式WEB设计(ResponsiveWebdesign)是一种网页设计布局，是EthanMarcotte在2010年5月份提出的一个概念，其设计理念是：页面的设计与开发应当根据用户行为以及设备环境(系统平台、屏幕尺寸、屏幕定向等)进行相应的响应和调整。这个概念是为解决移动互联网浏览而诞生的。简而言之，就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。

初识响应式web设计7设计理念一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本

初识响应式web设计8用户体验响应式网页设计考虑到多平台、多种屏幕尺寸的情况，可以为不同终端的用户提供更加舒适的界面和更好的用户体验。当你不知道用户使用什么设备，不知道用户的屏幕尺寸时，又想达到较优布局，那么可以采用响应式设计。随着大屏幕移动设备的普及，响应式网页设计用“大势所趋”来形容也不为过。

初识响应式web设计9技术实现流体布局HTML5+CSS3的基本网页设计中以百分比为度量单位的布局技术实现方式。在响应式设计的布局中，不再以像素（px）作为唯一单位，而是采用百分比或者混合百分比、像素为单位，设计出更具灵活性的布局方式。媒介查询HTML5+CSS3的媒体查询可以让你根据在特定环境下查询到的各种属性值——比如设备类型、分辨率、屏幕物理尺寸及色彩等——来决定应用什么样的样式。通过使用媒介查询，可以获取到设备及设备的特性，及时的响应布局方案，从而解决之前在单纯的布局设计中遗留的问题。弹性图片伴随布局的弹性，图片作为信息重要的形式之一也必须有更灵活的方式去适应布局的变化。扩大研究范围：除了图片，还应该包括图标、图表、视频等信息内容的响应方式。

响应式Web设计基础/02

响应式Web设计基础11什么是视口？为什么会有视口？视口简单来说就是浏览器显示页面内容的屏幕区域。移动端屏幕多种多样，由于不同手机分辨率、屏幕宽高比都有可能不同，同一张图片在不同移动设备端显示的位置和大小，在视觉上存在差异，我们需要对不同的移动端屏幕进行适配，使相同的程序逻辑在不同的屏幕上显示的视觉效果一致，为此出现了视口的概念。如何理解视口？视口(Viewport)是响应式设计中一个非常重要的概念，其目的是为了让iPhone的小屏幕尽可能完整显示整个网页。通过设置视口，不管网页原始的分辨率尺寸有多大，都能将其缩小显示在手机浏览器上，保证网页在手机上看起来更像在桌面浏览器中的样子。视口（viewport）

12在移动端浏览器中，存在着3种视口，分别是视觉视口(visualviewport)、布局视口(layoutviewport)和理想视口(idealviewport)。视觉视口也称可见视口是指设备的屏幕宽度(浏览器窗口宽度)。视觉视口是指用户正在看到的网站的区域，这个区域的宽度等同于移动设备的浏览器窗口的宽度。需要注意的是，当我们在手机中缩放网页的时候，操作的是视觉视口，而布局视口仍然保持原来的宽度。响应式Web设计基础视口（viewport）

13布局视口是指网页的宽度，有可能是768px、980px或1024px等，这个宽度并不适合在手机屏幕中展示。移动端浏览器之所以采用这样的默认设置，是为了解决早期的PC端页面在手机上显示的问题。在图中，当移动端浏览器展示PC端网页内容时，由于移动端设备屏幕比较小，不能像PC端浏览器那样完美地展示网页，这正是布局视口存在的问题。这样的网页在手机的浏览器中会出现左右滚动条，用户需要左右滑动才能查看完整的一行内容。响应式Web设计基础视口（viewport）

响应式Web设计基础14理想视口是指对设备来讲最理想的视口尺寸。采用理想视口的方式，可以使网页在移动端浏览器上获得最理想的浏览和阅读的宽度。在理想视口情况下，布局视口的大小和屏幕宽度是一致的，这样就不需要左右滚动页面了。在开发中，为了实现理想视口，需要给移动端页面添加标签配置视口，通知浏览器来进行处理。视口（viewport）

响应式Web设计基础15举例帮助大家理解：假设有一个设备屏幕宽度为414像素（视觉视口），在该设备的浏览器中展示一个宽度为1200像素（布局视口）的网页，如果不做视口的设置，网页的内容将会显示很