响应式Web设计_new.pptx

响应式Web设计 分享 曾平 2213314555 在设计中经常遇到这几个问题： 1.想要网站兼容手机、平板电脑、pc，就得为不同的设备定制不同的版本。 2.想要网站的某些页面在宽屏显示器下一行显示更多的内容，又得为宽屏定制一个版本。 3.很多人并不是在全屏的情况下浏览我们的页面，如果让页面随着浏览器宽度改变而相应的调整会不会比较好？ 有没有办法能有效解决这些问题呢？ 响应式Web设计(Responsive Web design)的理念是页面的设计与开发应当根据设备环境（屏幕尺寸、屏幕定向、系统平台等）以及用户行为（改变窗口大小等）进行相应的响应和调整。无论用户正在使用pc、平板电脑，或者手机，无论是全屏显示还是非全屏的情况，无论屏幕是横向还是竖向，页面都应该能够自动切换分辨率、图片尺寸及相关脚本功能等，以适应不同设备。 响应式设计理念是基于流动布局、弹性图片、弹性表格、弹性视频和媒体查询等技术的组合。响应式设计可以随所显示的屏幕大小而改变。实现响应式设计的主要方法是使用 CSS 媒体查询。 响应式Web设计的优势： 开发、维护、运营成本优势：页面只有一个，只是针对不同的分辨率、不同的设备环境进行了一些不同的设计，所以在开发、维护和运营上，相对多个版本，能节约成本。 兼容性优势：移动设备新的尺寸层出不穷，定制的版本通常只适用于某些规格的设备，如果新的设备分辨率变化较大，则往往不能兼容，而开发新的版本需要时间，这段时间内的访问就是个问题，但是响应式Web设计可以提前预防这个问题。 操作灵活：响应式设计是针对页面的，可以只对必要的页面进行改动，其他页面不受影响。 响应式Web实例 产品及设计 篇 响应式网页 产品及设计 规划一个页面时，需要考虑 ： 页面结构 页面交互 内容的优先级 页面逻辑 设备类型 屏幕尺寸 ............... 如果在不同设备（手机、平板、PC）上该怎么展现？ 响应式网页产品及设计：1.断点划分（尺寸临界值） 响应式网页产品及设计：1.断点划分 A. 按尺寸划分设计内容，这里推荐320-720、720-1024、1024，将整个屏幕大小分成三个区段，小于320的不予考虑。 【物理像素 、CSS像素】 一个显示屏的成像原理是通过一系列的小点排列成一个大的矩形，不同的小点通过显示不同的颜色来显示成图像。这每一个小点被叫做一个物理像素 浏览器里的一切长度都是以CSS像素为单位的。在非高清屏幕以及未缩放浏览器的情况下，一个CSS像素等于一个物理像素 iPhone设备 尺寸 分辨率 点 iPhone 3和3s 3.5英寸 (320×480) 320×480 iPhone 4和4s 3.5英寸 (640×960) 320×480 iPhone 5和5s 4.0英寸 (640×1136) 320×568 iPhone 6 4.7英寸 (750×1334) 375×667 iPhone6 Plus：5.5英寸 (1080×1920) 414x736(打印测试出来的) ipad1和2 9.7 （768x1024） （768x1024） ipad3和4， 9.7 （1536x2048） （768x1024） ipad air 9.7 （1536x2048） （768x1024） ipad mini 7.9 （768x1024） （768x1024） ipad mini2 7.9 （1536x2048） （768x1024） 响应式网页产品及设计：1.断点划分 B.按设计内容划分，根据设计内容设置不同的断点，以达到适应不同尺寸设备最佳显示效果。 （忘记设备，按设计内容最佳效果展示 进行划分，比如 480 768 980 ） 响应式网页产品及设计：2.页面内容优先级 在响应式网页设计中，有时候我们需要对页面内容进行删减，按照优先级显示内容，只显示高优先级内容是原则之一。 在屏幕较小的移动设备上应该优先考虑内容并且去移掉那些小的栏目。在顶部显示高优先级内容，即把最重要的内容放置在顶部。 导航是否一定要出现在页头或者重新布局改在页尾都要依网站具体规划去考虑。 响应式网页产品及设计：3.手指操作 提供清晰和友好的手指操作链接。 尤其在手机设备上，可点击操作的区块不宜过小，引导要清晰强烈，不忽略任何一款设备。 响应式网页产品及设计：4.视觉和感觉 调整设计来适应可用空间，使得用户在不同的设备上仍保持对同一页面相同的视觉和感觉。 这也遵循我们交互设计体验一致的原则。