CSS 响应式布局-案例-马育民老师

# 说明

当浏览器窗口 **大于** `800px` 时，布局如下图：

>分为主区域（800px）和右侧部分（200px），水平显示

![](https://www.malaoshi.top/upload/0/0/1GWIYJtBkCQ.png)

当浏览器窗口 **小于** `800px` 时，布局如下图：

>分为主区域（800px）和右侧部分（800px），垂直显示

![](https://www.malaoshi.top/upload/0/0/1GWIYKZUGEU.png)

# 实现

### css

```
*{
    margin: 0;
    padding: 0;
}
#box{
    width: 1000px;
    margin: 0 auto;
}
.main{
    width: 800px;
    height: 500px;
    background-color: bisque;
    float: left;
}

.right{
    width: 200px;
    height: 500px;
    background-color: aquamarine;
    float: left;
}
/* 当浏览器窗口宽度小于800时的样式，取消main 和 right的浮动，且设置宽度为 100% */
@media screen and (max-width:800px) {
    #box{
        width: 100vw;
        margin: 0 auto;
    }
    .main{
        float: none;
        width: 100vw;
    }
    .right{
        float: none;
        width: 100vw;
    }
}
```

#### 优先级

CSS 的优先级：写在 **下面 的类样式**，**高于** 写在 **上面 的类样式**

所以 `@media`  样式，必须在 其他样式的 **下面**，**才能生效**

### html

```
<div id="box">
    <div class="main"></div>
    <div class="right"></div>
</div>
```

原文出处：/show_1GWIYOOq6ic.html