自适应网站切换

今天程序媛来分享一下关于调节浏览器窗口网站内容自适应的方法media
实践出真知

//添加一个盒子，在里面写标题和ul
<div>
    <h1>media的使用</h1>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
</div>

//并给以上html添加css样式
//div现在为天蓝色
div {
    width: 100%;
    height: 600px;
    background: skyblue;
    text-align: center;
}
//ul现在的高度是40px，颜色是粉色
ul {
    width: 80%;
    height: 40px;
    list-style: none;
    background: pink;
}
ul li {
    width: 30%;
    height: 40px;
    float: left;
    border-right: 1px solid black;
    text-align: center;
}

现在我想当窗口的宽度缩放到400px的时候，盒子背景变成粉色，ul的高度变为20px、背景变为天蓝色
可以使用

这里是引用
@media screen and (max-width: 最大切换宽度){
移动端的CSS样式
}

@media screen and (max-width: 500px) {
    div {
        width: 100%;
        height: 600px;
        background: pink;
        text-align: center;
    }
    ul {
        width: 40%;
        height: 20px;
        list-style: none;
        background-color: skyblue;
    }
    ul li {
        width: 30%;
        height: 20px;
        float: left;
        border-right: 1px solid black;
        text-align: center;
    }
}

这样以500px为分界值，当窗口宽度大于500px时，显示移动窗口的样式；当窗口宽度小于500px时，显示PC窗口的样式。
注意：移动端的样式如果没有重新设置，会直接使用PC端设置的样式