基于HTML5的响应式Web设计

基于HTML5的响应式Web设计自适应多种移动终端的Web设计技术目录响应式Web设计的产生及应用场景实现响应式Web设计的手段实现响应式Web设计的步骤工具&资源响应式Web设计的产生HTML5/移动互联网响应式Web设计的产生响应式Web设计的产生1991

1994

1996

+

1997

1998

2000

2002

TablelessWebDesign2005

AJAX2009

HTML5

HTML5HTMLCSS1JSHTML2HTML4CSS2XHTML1响应式Web设计的产生

HTML5~=

+

+

HTML5HTMLCSSJS响应式Web设计的产生离线/存储实时/通信文件/硬件访问语义&标记图像/多媒体CSS3接口&零件

HTML5HTMLCSSJSJSJSHTMLJSHTMLJS响应式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/流体表格实现响应式Web设计的手段液态图片裁剪前裁剪后实现响应式Web设计的手段不作为内容，仅作为装饰不使用img，仅使用background:url(styx.jpg)no-repeatright;Demo：

/demo/crop_background.html液态图片实现响应式Web设计的手段液态图片裁剪前裁剪后实现响应式Web设计的手段随着宽度缩小，outerimg裁剪，innerimg向左移动不使用img，仅使用img{width:20em;max-width:500px;}Demo：

/demo/composite.html液态图片实现响应式Web设计的手段液态图片未设置initial-scale设置initial-scale实现响应式Web设计的手段禁止图片被自动缩放使用<metaname="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：

/d/responsive-web-design/ex/ex-site-FINAL.html媒体选择器实现响应式Web设计的手段

响应屏幕分辨率变化

响应设备原生行为变化持续增强实现响应式Web设计的步骤流体表格/液态图片/媒体选择器实现响应式Web设计的步骤实现响应式Web设计的步骤

禁止自动缩放

<metaname="viewport" content="width=device-width,

initial-scale=1.0">步骤1：设置MetaTag实现响应式Web设计的步骤

布置页面

步骤2：HTML结构实现响应式Web设计的步骤

设置媒体选择器

步骤3：

MediaQueries实现响应式Web设计的步骤用户体验师勾画出页面的整体样式确定最大分辨率下应该显示的内容在分辨率不断变化的情况下进行隐藏、缩放或者裁剪。使用相对尺寸进行定位和布局使用流体表格和液体图片响应分辨率。根据需要变化显示方式的元素，加入媒体选择器。设计到实现工具&资源设备模拟器/在线资源工具&资源工具&资源不同分辨下的测试工具

/responsive/浏览器缩放工具

/模拟各种主流设备

/screenfly/设备模拟器工具&资源葡萄城控件团队博客

响应式设计(ResponseWebDesign)浅谈

响应式设计(ResponseWeb