响应式布局

网页手机wap2.0网页的head里加入下面这条元标签，在iPhone的浏览器中页面将以原始大小显示，并不允许缩放。

<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">   

width - viewport的宽度 height - viewport的高度
initial-scale - 初始的缩放比例
minimum-scale - 允许用户缩放到的最小比例
maximum-scale - 允许用户缩放到的最大比例
user-scalable - 用户是否可以手动缩放

/媒体查询，大于480px小于640px/
@media (min-width: 480px) and (max-width: 640px) {
#tour h2,.information .price strong {
font-size: .26rem;
}
#tour h3, #footer, #tour figcaption, #tour .info, .list {
font-size: .16rem;
}
#headline h2 {
font-size: .22rem;
}
#headline h3 {
font-size: .14rem;
}
.list h2 {
font-size: .2rem;
}
}

/媒体查询，小于480px/
@media (max-width: 480px) {
#tour h2,.information .price strong {
font-size: .20rem;
}
#tour h3, #tour figcaption, #tour .info, .list {
font-size: .14rem;
}
#footer {
font-size: .12rem;
}

}