响应式布局

网页手机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;
}

}

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容