响应式网页设计
相应式设计详解
一、viewport标签
基本语法：
<meta name="viewport" content="width=device-width,initial-scale=1" />
上面这行代码的意思是，面积的100%。网页宽度默认等于屏幕宽度(width=device-width),原始缩放比例(initial-scale=1)为1.0.即网页初始大小占屏幕
二、媒体查询
“自适应网页设计”的核心，就是css3引入的Midia Query
自动探测屏幕宽度，然后加载相应的css文件
<link rel="stylesheet" type="text/css" media="screen and (max-width:767px)" href="phone.css" />
上面的代码意思是，如果屏幕宽度小于767像素（max-width:767px），就加载phone.css文件
<link rel="stylesheet" type="text/css" media="screen and (min-width:768px)" href="style.css" />
如果屏幕宽度大于768px，则加载style.css文件
三、不使用绝对宽度
由于网页会根据屏幕宽度调整布局，所以不能使用绝对宽度的布局，也不能使用具有绝对宽度的元素。这一条非常重要
具体说，css代码不能指定像素宽度：
如： width:xxx px;
只能指定百分比宽度：
如： width:xxx %;
四、相对大小的字体
字体也不能使用绝对大小(px)，而应使用相对大小(rem)
rem字体大小是相对于根元素<html>字体大小，默认网页根元素大小为100%，即16像素，所以1rem=16px; (0.75rem=12px,0.85rem=14px)
在实际项目中，可以使用如下方式设置：
html{font-size:62.5%} 即1rem=10px
12px=1.2rem
14px=1.4rem
16px=1.6rem
五、图片的自适应（fluid image）
除了布局和文本，“自适应网页设计”还必须实现图片的自动缩放
img{max-width:100%}
为了保证所有多媒体标签实现自适应也可以设置object,embed{max-width:100%}
