首页 > 代码库 > 响应式布局

响应式布局

2024-10-28 01:37:02   207人阅读

响应式布局就是根据浏览器的窗口大小来调整整个页面的布局，比如当浏览器的宽度在1000px及其以上，那么2个div并排，如果宽度在900px以下，那么就是1个div占一行

 

css部分：

.box{
    width: 1000px;
    margin: auto;
}
.box>div{
    width: 50%;
    height: 100px;
    float: left;
}
.box>div:nth-child(1),.box2>div:nth-child(1){
    background-color: red;
}
.box>div:nth-child(2),.box2>div:nth-child(2){
    background-color: orange;
}
.box>div:nth-child(3),.box2>div:nth-child(3){
    background-color: yellow;
}
.box>div:nth-child(4),.box2>div:nth-child(4){
    background-color: greenyellow;
}
.box>div:nth-child(5),.box2>div:nth-child(5){
    background-color: blue;
}
.box>div:nth-child(6),.box2>div:nth-child(6){
    background-color: mediumpurple;
}
.box2{
    width: 500px;
    margin: auto;
    overflow: hidden;
}
.box2>div{
    width: 100%;
    height: 100px;
}

@media screen and (min-width: 1000px) {
    .box2{
        display: none;
    }
}
@media screen and (max-width: 900px) {
    .box{
        display: none;
    }
}

html部分：


<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>响应式布局</title>
</head>

<body>
<div class="box">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</div>
<div class="box2">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</div>
</body>
</html>


当浏览器宽度在1000px及其以上：

技术分享

 


当浏览器宽度在900px及其以下：
技术分享

 

 

响应式布局


联系
我们