直接贴代码，效果图在后面：
index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>响应式布局</title> <link rel="stylesheet" href="response.css"> </head> <body> <div id="container"> <div id="header"> <p>header</p> </div> <div id="left"> <p>left</p> </div> <div id="main"> <p>main</p> </div> <div id="right"> <p>right</p> </div> <div id="footer"> <p>footer</p> </div> </div> </body> </html>
response.css
/*基础样式*/
*{margin:0; padding:0; }
#container{margin:0 auto; width:1300px; background:#ddd; font-size:3em;}
#header{margin-bottom:5px;background:orange;height:200px;width:100%; float:left;}
#left{margin-bottom:5px;background:orange;height:400px; width:350px;float:left;}
#main{margin-bottom:5px;background:orange;height:400px;width:580px;margin-left:10px;margin-right:10px;float:left;}
#right{margin-bottom:5px;background:orange;height:400px;width:350px;float:left;}
#footer{background:orange;height:100px;width:100%;float:left; }
/*最大宽度小于1000px，最小宽度大于700px时，使用下面的样式*/
@media screen and (max-width:1000px) and (min-width:700px) {
#container{margin:0 auto;width:100%; background:#ddd; font-size:2em;}
#left{margin-bottom:5px;background:orange;height:200px; width:35%;float:left;}
#main{margin-bottom:5px;background:orange;height:200px;width:64%;margin-left:0;margin-right:0;float:right;}
#right{margin-bottom:5px;background:orange;height:200px;width:100%;float:left;}
}
/*最大宽度小于699px时，使用下面这种样式*/
@media screen and (max-width:699px){
#container{margin:0 auto;width:100%; background:#ddd; font-size:1.5em;}
#header{margin-bottom:5px;background:orange;height:100px;width:100%; float:left;}
#left{margin:0;margin-bottom:5px;background:orange;height:150px; width:100%;float:left;}
#main{margin-bottom:5px;background:orange;height:150px;width:100%;margin-left:0;margin-right:0;float:left;}
#right{margin-bottom:5px;background:orange;height:100px;width:100%;float:left;}
}
效果图：
宽度大于1000px时
700px < 宽度 < 1000px时
当最大宽度小于699px时，
需要注意的有以下几点：
1、上面的代码在移动端并不会如此显示，因为移动端的显示器和电脑的显示器像素比例是有区别的。
2、从1000以上的宽度变为1000以下，700以上，那么@media中写的会覆盖从祖先继承来的样式。此时1000px以上的样式为父，1000到700px的样式为子。
然后宽度变为600px，小于了700px，那么就会加载第三个样式，此时第三个样式的父亲为第二个样式。继承的是第一个样式、第二个样式。以此类推。
原文地址：https://www.cnblogs.com/-beyond/p/9059707.html
时间： 2024-10-08 02:22:43