说明

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

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

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

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

实现

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