基于HTML5的响应式Web设计.pptx

基于HTML5的响应式Web设计自适应多种移动终端的Web设计技术更多期待. 更多收获.提纲响应式Web设计的产生及应用场景实现响应式Web设计的手段实现响应式Web设计的步骤工具 资源响应式Web设计的产生响应式Web设计的产生HTML5/移动互联网响应式Web设计的产生HTML5HTMLHTML 2CSS 1JSHTML 4CSS 2XHTML 11991?1994?1996? +?1997?1998?2000?2002 Tableless Web Design2005? AJAX2009? HTML 5?响应式Web设计的产生HTML5HTMLCSSJS HTML5 ~=? +? ? +?响应式Web设计的产生HTML5JSJSJSHTMLHTMLHTMLJSCSSJS离线/存储实时/通信文件 / 硬件访问语义 标记图像 / 多媒体CSS3接口 零件?响应式Web设计的产生移动互联网响应式Web设计的产生移动互联网响应式Web设计的产生技术+需求响应式Web设计基于HTML5技术响应不同终端尺寸仅需设计1次响应式Web设计的应用场景响应式Web设计的应用场景任意设备响应式Web设计的应用场景一次设计 任意访问新浪新闻中心在Android上的访问效果响应式Web设计的应用场景一次设计 任意访问使用响应式Web设计的站点在Android上的访问效果响应式Web设计的应用场景一次设计 任意访问使用响应式Web设计的站点在其他设备上的访问效果实现响应式Web设计的手段实现响应式Web设计的手段流体表格/液态图片/媒体选择器实现响应式Web设计的手段流体表格600×8001280×768实现响应式Web设计的手段流体表格使用em相对单位取代px绝对单位计算em target ÷ context = resultDemo：/fluid960gs/ /fluid960gs/实现响应式Web设计的手段液态图片裁剪前裁剪后实现响应式Web设计的手段液态图片不作为内容，仅作为装饰不使用img，仅使用background: url(styx.jpg) no-repeat right; Demo：/fluid960gs/ /demo/crop_background.html/demo/crop_background.html实现响应式Web设计的手段液态图片裁剪前裁剪后实现响应式Web设计的手段液态图片随着宽度缩小，outer img 裁剪， inner img 向左移动不使用img，仅使用img { width: 20em; max-width: 500px; } Demo：/fluid960gs/ /demo/composite.html/demo/composite.html实现响应式Web设计的手段液态图片设置initial-scale未设置initial-scale实现响应式Web设计的手段液态图片禁止图片被自动缩放使用meta name=viewport content=width=device-width; initial-scale=1.0实现响应式Web设计的手段媒体选择器1行显示2行显示3行显示实现响应式Web设计的手段媒体选择器使用em相对单位取代px绝对单位计算em @media (max-width: 400px) { .figure, li#f-mycroft { margin-right: 3.31%; /* 21px / 633px */ width: 48.34%; /* 306px / 633px */ } }Demo：/fluid960gs/ /d/responsive-web-design/ex/ex-site-FINAL.html/d/responsive-web-design/ex/ex-site-FINAL.html实现响应式Web设计的手段持续增强?响应屏幕分辨率变化 响应设备原生行为变化实现响应式Web设计的步骤实现响应式Web设计的步骤流体表格/液态图片/媒体选择器实现响应式Web设计的步骤步骤1：设置Meta Tag?禁止自动缩放 meta name=viewport content=width=device-width, initial-scale=1.0实现响应式Web设计的步骤步骤2：HTML结构?布置页面实现响应式Web设计的步骤步骤3： Media Queries?设置媒体选择器实现响应式Web设计的步骤设计到实现用户体验师勾画出页面的整体样式确定最大分辨率下应该显示的内容在分辨率不断变化的情况下进行隐藏、缩放或者裁剪。使用相对尺寸进行定位和布局使用流