1、DIVCSS小案例描述
我们首先设置一个DIV盒子CSS命名为“.abc”，设置其高度为300px，css边框为黑色；以及设置margin:0 auto布局居中。预先设置这两个样式是为了便于观察。
我 们通过手动拖拽浏览器显示宽度，然后观察此盒子宽度变化情况，当浏览器宽度调节到宽度不大于500px时，对应此盒子宽度显示100px；调节浏览器宽度 不大于901px时，显示“.abc”对应盒子宽度显示200px;当调节浏览器宽度大于1201px时，盒子对象宽度显示1200px；当小于 1200px时候显示宽度为900px。
.abc{ height : 300px ; border : 1px solid #000 ; margin : 0 auto }
@media screen and ( min-width : 1201px ) { .abc { width : 1200px }
} /* css注释：设置了浏览器宽度不小于1201px时 abc 显示1200px宽度 */
@media screen and ( max-width : 1200px ) { .abc { width : 900px }
} /* 设置了浏览器宽度不大于1200px时 abc 显示900px宽度 */
@media screen and ( max-width : 901px ) { .abc { width : 200px ;}
} /* 设置了浏览器宽度不大于901px时 abc 显示200px宽度 */
@media screen and ( max-width : 500px ) { .abc { width : 100px ;}
} /* 设置了浏览器宽度不大于500px时 abc 显示100px宽度 */
需要注意是CSS代码顺序，由大到小排版CSS（判断浏览器宽度越大越放前），这样是因为逻辑关系，@media判断CSS排错将导致判断失效。
<!DOCTYPE html> <html> <head> <meta charset= "utf-8" /> <title>无标题文档</title> <style> .abc{ height : 300px ; border : 1px solid #000 ; margin : 0 auto }
@media screen and ( min-width : 1201px ) { .abc { width : 1200px }
} /* 设置了浏览器宽度不小于1201px时 abc 显示1200px宽度 */
@media screen and ( max-width : 1200px ) { .abc { width : 900px }
} /* 设置了浏览器宽度不大于1200px时 abc 显示900px宽度 */
@media screen and ( max-width : 900px ) { .abc { width : 200px ;}
} /* 设置了浏览器宽度不大于900px时 abc 显示200px宽度 */
@media screen and ( max-width : 500px ) { .abc { width : 100px ;}
} /* 设置了浏览器宽度不大于500px时 abc 显示100px宽度 */
</style> </head> <body> <div class= "abc" >DIVCSS 5 实例：我这个DIV宽度会随浏览器宽度变化哦，试试改变浏览器宽度</div> </body> </html>
4、为了兼容IE9以下版本浏览器需要加入一个google的JS，当然可以下载引人html
<!--[ if lt IE 9]>
<script src= "http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js" ></script>
<![endif]-->
5.完美兼容
< code class = "hljs xml" style = "padding:10px;line-height:1.4;font-family:Menlo, Monaco, Consolas, 'Courier New', monospace;" >< span class = "hljs-meta" style = "color:rgb(127,159,127);" ><!DOCTYPE html></ span > < span class = "hljs-tag" style = "color:rgb(227,206,171);" >< span class = "hljs-tag" ><</ span >< span class = "hljs-name" style = "color:rgb(239,239,143);" >< span class = "hljs-tag" style = "color:rgb(227,206,171);" >< span class = "hljs-name" style = "color:rgb(239,239,143);" >html</ span ></ span ></ span >< span class = "hljs-tag" >></ span ></ span > < span class = "hljs-tag" style = "color:rgb(227,206,171);" >< span class = "hljs-tag" ><</ span >< span class = "hljs-name" style = "color:rgb(239,239,143);" >< span class = "hljs-tag" style = "color:rgb(227,206,171);" >< span class = "hljs-name" style = "color:rgb(239,239,143);" >head</ span ></ span ></ span >< span class = "hljs-tag" >></ span ></ span > < span class = "hljs-tag" style = "color:rgb(227,206,171);" >< span class = "hljs-tag" ><</ span >< span class = "hljs-name" style = "color:rgb(239,239,143);" >< span class = "hljs-tag" style = "color:rgb(227,206,171);" >< span class = "hljs-name" style = "color:rgb(239,239,143);" >meta</ span ></ span ></ span >< span class = "hljs-tag" > </ span >< span class = "hljs-attr" >< span class = "hljs-tag" >< span class = "hljs-attr" >charset</ span ></ span ></ span >< span class = "hljs-tag" >=</ span >< span class = "hljs-string" style = "color:rgb(204,147,147);" >< span class = "hljs-tag" style = "color:rgb(227,206,171);" >< span class = "hljs-string" style = "color:rgb(204,147,147);" >"utf-8"</ span ></ span ></ span >< span class = "hljs-tag" > /></ span ></ span > < span class = "hljs-tag" style = "color:rgb(227,206,171);" >< span class = "hljs-tag" ><</ span >< span class = "hljs-name" style = "color:rgb(239,239,143);" >< span class = "hljs-tag" style = "color:rgb(227,206,171);" >< span class = "hljs-name" style = "color:rgb(239,239,143);" >title</ span ></ span ></ span >< span class = "hljs-tag" >></ span ></ span >无标题文档< span class = "hljs-tag" style = "color:rgb(227,206,171);" >< span class = "hljs-tag" ></</ span >< span class = "hljs-name" style = "color:rgb(239,239,143);" >< span class = "hljs-tag" style = "color:rgb(227,206,171);" >< span class = "hljs-name" style = "color:rgb(239,239,143);" >title</ span ></ span ></ span >< span class = "hljs-tag" >></ span ></ span > < span class = "hljs-tag" style = "color:rgb(227,206,171);" >< span class = "hljs-tag" ><</ span >< span class = "hljs-name" style = "color:rgb(239,239,143);" >< span class = "hljs-tag" style = "color:rgb(227,206,171);" >< span class = "hljs-name" style = "color:rgb(239,239,143);" >style</ span ></ span ></ span >< span class = "hljs-tag" >></ span ></ span >< span class = "css" >< span class = "css" > </ span >< span class = "hljs-selector-class" style = "color:rgb(239,239,143);" >< span class = "css" >< span class = "hljs-selector-class" >.abc</ span ></ span ></ span >< span class = "css" >{ </ span >< span class = "hljs-attribute" style = "color:rgb(239,220,188);" >< span class = "css" >< span class = "hljs-attribute" >height</ span ></ span ></ span >< span class = "css" >:</ span >< span class = "hljs-number" style = "color:rgb(140,208,211);" >< span class = "css" >< span class = "hljs-number" >300px</ span ></ span ></ span >< span class = "css" >; </ span >< span class = "hljs-attribute" style = "color:rgb(239,220,188);" >< span class = "css" >< span class = "hljs-attribute" >border</ span ></ span ></ span >< span class = "css" >:</ span >< span class = "hljs-number" style = "color:rgb(140,208,211);" >< span class = "css" >< span class = "hljs-number" >1px</ span ></ span ></ span >< span class = "css" > solid </ span >< span class = "hljs-number" style = "color:rgb(140,208,211);" >< span class = "css" >< span class = "hljs-number" >#000</ span ></ span ></ span >< span class = "css" >; </ span >< span class = "hljs-attribute" style = "color:rgb(239,220,188);" >< span class = "css" >< span class = "hljs-attribute" >margin</ span ></ span ></ span >< span class = "css" >:</ span >< span class = "hljs-number" style = "color:rgb(140,208,211);" >< span class = "css" >< span class = "hljs-number" >0</ span ></ span ></ span >< span class = "css" > auto}
@</ span >< span class = "hljs-keyword" style = "color:rgb(227,206,171);" >< span class = "css" >< span class = "hljs-keyword" >media</ span ></ span ></ span >< span class = "css" > screen and (min-width: </ span >< span class = "hljs-number" style = "color:rgb(140,208,211);" >< span class = "css" >< span class = "hljs-number" >1201px</ span ></ span ></ span >< span class = "css" >) { </ span >< span class = "hljs-selector-class" style = "color:rgb(239,239,143);" >< span class = "css" >< span class = "hljs-selector-class" >.abc</ span ></ span ></ span >< span class = "css" > {</ span >< span class = "hljs-attribute" style = "color:rgb(239,220,188);" >< span class = "css" >< span class = "hljs-attribute" >width</ span ></ span ></ span >< span class = "css" >: </ span >< span class = "hljs-number" style = "color:rgb(140,208,211);" >< span class = "css" >< span class = "hljs-number" >1200px</ span ></ span ></ span >< span class = "css" >}
} </ span >< span class = "hljs-comment" style = "color:rgb(127,159,127);" >< span class = "css" >< span class = "hljs-comment" >/* css 注释说明：设置了浏览器宽度不小于1201px时 abc 显示1200px宽度 */</ span ></ span ></ span >< span class = "css" >
@</ span >< span class = "hljs-keyword" style = "color:rgb(227,206,171);" >< span class = "css" >< span class = "hljs-keyword" >media</ span ></ span ></ span >< span class = "css" > screen and (max-width: </ span >< span class = "hljs-number" style = "color:rgb(140,208,211);" >< span class = "css" >< span class = "hljs-number" >1200px</ span ></ span ></ span >< span class = "css" >) { </ span >< span class = "hljs-selector-class" style = "color:rgb(239,239,143);" >< span class = "css" >< span class = "hljs-selector-class" >.abc</ span ></ span ></ span >< span class = "css" > {</ span >< span class = "hljs-attribute" style = "color:rgb(239,220,188);" >< span class = "css" >< span class = "hljs-attribute" >width</ span ></ span ></ span >< span class = "css" >: </ span >< span class = "hljs-number" style = "color:rgb(140,208,211);" >< span class = "css" >< span class = "hljs-number" >900px</ span ></ span ></ span >< span class = "css" >}
} </ span >< span class = "hljs-comment" style = "color:rgb(127,159,127);" >< span class = "css" >< span class = "hljs-comment" >/* 设置了浏览器宽度不大于1200px时 abc 显示900px宽度 */</ span ></ span ></ span >< span class = "css" >
@</ span >< span class = "hljs-keyword" style = "color:rgb(227,206,171);" >< span class = "css" >< span class = "hljs-keyword" >media</ span ></ span ></ span >< span class = "css" > screen and (max-width: </ span >< span class = "hljs-number" style = "color:rgb(140,208,211);" >< span class = "css" >< span class = "hljs-number" >900px</ span ></ span ></ span >< span class = "css" >) { </ span >< span class = "hljs-selector-class" style = "color:rgb(239,239,143);" >< span class = "css" >< span class = "hljs-selector-class" >.abc</ span ></ span ></ span >< span class = "css" > {</ span >< span class = "hljs-attribute" style = "color:rgb(239,220,188);" >< span class = "css" >< span class = "hljs-attribute" >width</ span ></ span ></ span >< span class = "css" >: </ span >< span class = "hljs-number" style = "color:rgb(140,208,211);" >< span class = "css" >< span class = "hljs-number" >200px</ span ></ span ></ span >< span class = "css" >;}
} </ span >< span class = "hljs-comment" style = "color:rgb(127,159,127);" >< span class = "css" >< span class = "hljs-comment" >/* 设置了浏览器宽度不大于900px时 abc 显示200px宽度 */</ span ></ span ></ span >< span class = "css" >
@</ span >< span class = "hljs-keyword" style = "color:rgb(227,206,171);" >< span class = "css" >< span class = "hljs-keyword" >media</ span ></ span ></ span >< span class = "css" > screen and (max-width: </ span >< span class = "hljs-number" style = "color:rgb(140,208,211);" >< span class = "css" >< span class = "hljs-number" >500px</ span ></ span ></ span >< span class = "css" >) { </ span >< span class = "hljs-selector-class" style = "color:rgb(239,239,143);" >< span class = "css" >< span class = "hljs-selector-class" >.abc</ span ></ span ></ span >< span class = "css" > {</ span >< span class = "hljs-attribute" style = "color:rgb(239,220,188);" >< span class = "css" >< span class = "hljs-attribute" >width</ span ></ span ></ span >< span class = "css" >: </ span >< span class = "hljs-number" style = "color:rgb(140,208,211);" >< span class = "css" >< span class = "hljs-number" >100px</ span ></ span ></ span >< span class = "css" >;}
} </ span >< span class = "hljs-comment" style = "color:rgb(127,159,127);" >< span class = "css" >< span class = "hljs-comment" >/* 设置了浏览器宽度不大于500px时 abc 显示100px宽度 */</ span ></ span ></ span >< span class = "css" >
</ span ></ span >< span class = "hljs-tag" style = "color:rgb(227,206,171);" >< span class = "hljs-tag" ></</ span >< span class = "hljs-name" style = "color:rgb(239,239,143);" >< span class = "hljs-tag" style = "color:rgb(227,206,171);" >< span class = "hljs-name" style = "color:rgb(239,239,143);" >style</ span ></ span ></ span >< span class = "hljs-tag" >></ span ></ span > < span class = "hljs-comment" style = "color:rgb(127,159,127);" > <!--[if lt IE 9]>
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]--> </ span > < span class = "hljs-tag" style = "color:rgb(227,206,171);" >< span class = "hljs-tag" ></</ span >< span class = "hljs-name" style = "color:rgb(239,239,143);" >< span class = "hljs-tag" style = "color:rgb(227,206,171);" >< span class = "hljs-name" style = "color:rgb(239,239,143);" >head</ span ></ span ></ span >< span class = "hljs-tag" >></ span ></ span > < span class = "hljs-tag" style = "color:rgb(227,206,171);" >< span class = "hljs-tag" ><</ span >< span class = "hljs-name" style = "color:rgb(239,239,143);" >< span class = "hljs-tag" style = "color:rgb(227,206,171);" >< span class = "hljs-name" style = "color:rgb(239,239,143);" >body</ span ></ span ></ span >< span class = "hljs-tag" >></ span ></ span > < span class = "hljs-tag" style = "color:rgb(227,206,171);" >< span class = "hljs-tag" ><</ span >< span class = "hljs-name" style = "color:rgb(239,239,143);" >< span class = "hljs-tag" style = "color:rgb(227,206,171);" >< span class = "hljs-name" style = "color:rgb(239,239,143);" >div</ span ></ span ></ span >< span class = "hljs-tag" > </ span >< span class = "hljs-attr" >< span class = "hljs-tag" >< span class = "hljs-attr" >class</ span ></ span ></ span >< span class = "hljs-tag" >=</ span >< span class = "hljs-string" style = "color:rgb(204,147,147);" >< span class = "hljs-tag" style = "color:rgb(227,206,171);" >< span class = "hljs-string" style = "color:rgb(204,147,147);" >"abc"</ span ></ span ></ span >< span class = "hljs-tag" >></ span ></ span >DIVCSS5实例：我这个DIV宽度会随浏览器宽度变化哦，试试改变浏览器宽度< span class = "hljs-tag" style = "color:rgb(227,206,171);" >< span class = "hljs-tag" ></</ span >< span class = "hljs-name" style = "color:rgb(239,239,143);" >< span class = "hljs-tag" style = "color:rgb(227,206,171);" >< span class = "hljs-name" style = "color:rgb(239,239,143);" >div</ span ></ span ></ span >< span class = "hljs-tag" >></ span ></ span > < span class = "hljs-tag" style = "color:rgb(227,206,171);" >< span class = "hljs-tag" ></</ span >< span class = "hljs-name" style = "color:rgb(239,239,143);" >< span class = "hljs-tag" style = "color:rgb(227,206,171);" >< span class = "hljs-name" style = "color:rgb(239,239,143);" >body</ span ></ span ></ span >< span class = "hljs-tag" >></ span ></ span > < span class = "hljs-tag" style = "color:rgb(227,206,171);" >< span class = "hljs-tag" ></</ span >< span class = "hljs-name" style = "color:rgb(239,239,143);" >< span class = "hljs-tag" style = "color:rgb(227,206,171);" >< span class = "hljs-name" style = "color:rgb(239,239,143);" >html</ span ></ span ></ span >< span class = "hljs-tag" >></ span ></ span ></ code >
