主页面 media.html

<!DOCTYPEhtml><html><head><metacharset="utf-8"/><title>响应式布局演示实例(MediasQuery)</title><style>body,h3{margin:0px;padding:0px;color:white}section#main,header,aside,footer{background:pink;margin:5px0;}h3{text-align:center;foot-size:3em}section#container{margin:0auto;width:960px;}header{float:left;width:100%;line-height:100px;}#left{float:left;width:200px;line-height:400px;}section#main{float:left;width:540px;line-height:400px;margin-left:10px;}#right{float:right;width:200px;line-height:400px;}footer{float:left;width:100%;line-height:80px;}</style>/*1000px以上屏幕显示*/<linkrel="stylesheet"type="text/css"media="screenand(min-width:1000px)"href="pc.css"/>/*pad640-1000px屏幕显示*/<linkrel="stylesheet"type="text/css"media="screenand(min-width:640px)and(max-width:1000px)"href="pad.css"/>/*phone640px以下屏幕显示*/<linkrel="stylesheet"type="text/css"media="screenand(max-width:639px)"href="phone.css"/></head><body><sectionid="container"><header><h3>Header</h3></header><asideid="left"><h3>Left</h3></aside><sectionid="main"><h3>Main</h3></section><asideid="right"><h3>Right</h3></aside><footer><h3>Footer</h3></footer></section></body></html>

PC端 pc.css

/*1000px以上屏幕显示*/h3{color:yellow;font-size:4em}section#container{width:1160px;}section#main{width:740px;}

pad端pad.css

/*pad640-1000px屏幕显示*/h3{color:green;font-size:2.5em}section#container{width:600px;}#left{width:160px;}section#main{width:430px;}#right{display:none;}

phone端 phone.css

/*phone640px以下屏幕显示*/h3{color:red;font-size:1.5em}section#container{width:400px;}#left{float:left;width:100%;line-height:100px;}section#main{float:left;width:100%;line-height:200px;margin-left:0px;}#right{float:left;width:100%;line-height:100px;display:none;}

浏览器输出

pc端

pad端

phone端