（移动端）自适应和响应式布局

1、自适应

主要是指的<font color=red>宽度</font>的自适应​ 百分比的流式布局【宽度按照百分比进行布局】

2、响应式布局

 **通过设定屏幕不同时刻的样式进行设置**

<title>响应式布局</title>
<link rel="stylesheet" type="text/css" media="screen and (max-width: 480px)" href="style-1.css" />
<link rel="stylesheet" type="text/css" media="screen and (min-width: 480px) and (max-width: 760px)" href="style-2.css" />
<link rel="stylesheet" type="text/css" media="screen and (min-width: 760px) and (max-width: 995px)" href="style-3.css" />
<link rel="stylesheet" type="text/css" media="screen and (min-width: 995px) and (max-width: 1100px)" href="style-4.css" />
<link rel="stylesheet" type="text/css" media="screen and (min-width: 1100px)" href="style-5.css" />

如上述代码：

分别设置

屏幕最大480px时，展示一套css样式

屏幕最小480px,最大760px时，展示一套css样式

屏幕最小7690px,最大995px时，展示一套css样式

屏幕最小1100pxs时，展示一套css样式

将三种已有的开发技术整合起来，并命名

• 弹性布局

• 弹性图片【即图片宽度是100%】

• 媒体和媒体查询【今日重点】