什么时自适应网页设计
页面能适配众多不同的终端设备，让同一张网页自动适应不同大小的屏幕，根据屏幕宽度，自动调整布局.
2010年，Ethan Marcotte提出了"自适应网页设计"（Responsive Web Design）这个名词，指可以自动识别屏幕宽度、并做出相应调整的网页设计。响应式网页设计是自适应网页设计的子集。响应式网页设计指的是页面的布局（流动网格、灵活的图像及媒介查询）。总体目标就是去解决设备多样化问题。响应式布局等于流动网格布局，而自适应布局等于使用固定分割点来进行布局。当固定宽度与流动宽度结合起来时，自适应布局就是一种响应式设计，而不仅仅是它的一种替代方法。
如何进行自适应网页设计
1.学会运用 css3 Media Queries，根据不同的屏幕分辨率，选择应用不同的css规则
@media screen and (max-width:400px){
.class {
background:#ccc;
}
}
2.在网页头部加上viewport标签
<meta name="viewport" content="width=device-width, initial-scale=1.0">
该属性可以控制视窗口宽度的大小。它可以被设置为实际的具体像素width= 600或为特殊设备设置宽度值。 viewport设置属性如下：
width：可设定数值，或者指定为 device-width
height：可设定数值，或者指定為 device-height
initial-scale：第一次进入页面的初始比例
minimum-scale：允许缩小最小比例
maximum-scale：允许放大最大比例
user-scalable：允许使用者缩放，1 or 0 (yes or no)
3.不使用绝对宽度
4.字体最好不要用绝对大小(px)，而使用相对大小(em)
5.流动布局（fluid grid）
.main { float: rightright; width: 70%; }
.leftBar { float: left; width: 25%; }
6 图片的自动缩放，等比缩放
img{ max-width: 100%; }
转载：https://blog.csdn.net/tianxintiandisheng/article/details/102491688