实现下面功能

.box 的初始宽度设置为 1000px
当浏览器窗口宽度小于 1100px 时的样式，.box 宽度设置为 500px，并且 body背景色为green

代码

CSS：

<style>
    /* 设置 .box 样式 */
    .box{
        width: 1000px;
        height: 30px;
        background-color: goldenrod;
        margin: 0 auto;
    }
    /* 当浏览器窗口宽度小于等 1100px 时的样式 */
    @media screen and (max-width:1100px){
        body{
            background-color: green;
        }
        .box{
            width: 500px; /*宽度设置为500px*/
        }
    }
</style>

HTML：

<div class="box"></div>

优先级

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

所以 @media 样式，必须在 .box 原样式的下面，才能生效

参考：
https://blog.csdn.net/qq_37968920/article/details/82424009
https://blog.csdn.net/wzj2584454/article/details/76577371

原文出处：/show_1IX7T1CN4SBL.html