两种不同的模式

• 响应式设计(RWD)
• 适应性设计(AWD)

响应式设计概述

响应式设计是一个网站搭建的实践尝试，他使得每种设备和屏幕尺寸都能很好的工作，而不论是大屏还是小屏，手机或是pc。 响应式设计关注于提供每个人一个直观的感受和满足。使得pc和手机用户都能够从中受益。

两者区别

响应式通常意味着对待任何变化，反应更积极更快。

自适应往往是应对一个新需求或是情况的被动反应和变化

流式布局

流式布局，就是用灵活的网格搭建一个网站布局，它可以动态的调整以适应于任何宽度。网格布局使用相对长度单位，通常是百分比或是em。

固定布局

流式布局

总结

流式布局使用百分比宽度来限定布局元素，这样可以根据客户端分辨率的大小来进行合理的显示

一般来说，整体的页面采用百分比布局，在细小的地方依然需要使用像素计算来达到效果。

媒体查询

媒体查询就是向设备提问，如“你是一块屏幕吗？”，然后根据回答来进行处理。

媒体查询语法

• HTML
• CSS

HTML

							
<!-- Separate CSS File -->
<link href="styles.css" rel="stylesheet" media="all and (max-width: 1024px)">
							
						

CSS

							
/* @media Rule */
@media all and (max-width: 1024px) {...}
/* @import Rule */
@import url(styles.css) all and (max-width: 1024px) {...}
							
						

流式媒体

图片，视频以及其他媒体类型需要在视窗改变的情况下，按照比例改变大小。

						
img, video, canvas {
    max-width: 100%;
}
							
					

效果

移动第一

移动优先方法是指，先在小视窗加载网站默认样式，然后再添加用媒体查询设置的视窗样式。

背后动机

一个移动设备的用户，通常使用小视窗的设备，不应该加载pc机上面的所有样式，之后又加载为移动设备写的样式。

实践篇

浮动

• 利用float实现 Responsive
• city demo(demo2)

应用响应式的stylesheet

• 开发更加便捷
• city demo(demo3)
• 新首页(demo4)