响应式布局三步走

前言：制作响应式布局前，先开发固定尺寸的网页，当完成固定尺寸的网页后，在通过媒体查询为网页定制响应式布局

第一步，引入meta

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

屏幕按1:1的尺寸显示

并禁止用户缩放页面。

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 在智能手机的浏览器全视图浏览

<meta name="HandheldFriendly" content="true">

第二步，设置媒体查询

屏幕尺寸临界值：576px,768px,992px,1200px

@media screen and (max-width:576px){ //小于576px屏幕时会执行

}

@media only screen and (min-width:576px)and(max-width:768px){

}

@media only screen and (min-width:768px)and (max-width:992px){

}

@media only screen and (min-width:992px)and (max-width:1200px){

}

@media screen and (min-width:1200px){ 

}

第三步，尽量使用百分比来定义width ,max-width

 

仅此而已，剩下的就是开发中的细节优化了 ~~