老师在媒体查询中为什么给footer做那么多改变

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>响应式登录</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" type="text/css" href="css/style.css"/>
    </head>
    <body>
        <div id="wrapper">
            <header><img src="img/1a.png"/></header>
            <article class="count">
                <form>
                    <input type="text" placeholder="请输入账号"/>
                    <input type="pasword" placeholder="请输入密码"/>
                    <input type="submit" value="登录"/>
                </form>
                <div>
                    <span>
                        <input type="checkbox"/> 记住密码
                    </span>
                    <span>忘记密码</span>
                </div>
            </article>
            <footer>
                <ul>
                    <li><a href="#"><img src="img/2.png"/></a></li>
                    <li><a href="#"><img src="img/3.png"/></a></li>
                    <li><a href="#"><img src="img/4.png"/></a></li>
                </ul>
            </footer>
        </div>
    </body>
</html>

*{
    padding:0;
    margin:0;
    list-style:none;
    /* border:none; */
}
body,html{
    background:#4876ef;
}
#wrapper{
    width:400px;
    height:500px;
    background:#fff;
    position:absolute;
    top:0;
    right:0;
    bottom:0;
    left:0;
    margin:auto;
    overflow:hidden;
}
header{
    width:100%;
    height:91px;
    display:-webkit-box;
    -webkit-box-pack:center;
    /* border:1px solid red; */
}
header>img{
    position:relative;
    top:-30px;
}
.count{
    width:100%;
    /* border:1px solid red; */
    margin-top:10px;
}
.count>form{
    width:90%;
    /* border:1px solid green; */
    margin:0 auto;
    display:-webkit-box;
    -webkit-box-orient: vertical;
}
.count>form>input{
    display:block;
    padding:13px;
    border:0;
    box-shadow:0 0 1px #999999;/*用阴影做边框*/
}
.count>form>input:nth-child(1){
    border-radius:3px 3px 0 0 ;
}
.count>form>input:nth-child(2){
    border-radius:0 0 3px 3px;
}
.count>form>input:nth-child(3){
    margin-top:20px;
    background:#4876EF;
    border-radius:3px;
    color:#fff;
}
.count>div{
    width:90%;
    /* border:1px solid green; */
    margin:10px auto;
    display:-webkit-box;
    -webkit-box-pack:justify;
}
.count>div>span{
    display:block;
    color:#666;
}
footer{
    width:100%;
}
footer>ul{
    width:100%;
    display:-webkit-box;
     -webkit-box-pack:center;
      /*本行代码在谷歌中无效*/
}
footer>ul>li{
    display:-webkit-box;
    width:30%;
}
footer>ul>li>a{
    display:block;
}
footer>ul>li>a>img{
    display:block;
    width:60%;
    margin:0 auto;
}
@media screen and (max-width:420px){
    #wrapper{
        width:100%;
        height:100%;
        background:#4876EF;
    }
    header{
        overflow:hidden;
    }
    header>img{
        top:30px;
    }
    .count>form>input:nth-child(3){
        background:#0000ff;
    }
    .count>div>span{
        color:#fff;
    }
    /* footer{
        width:90%;
        margin:0 auto;
    }
    footer>ul{
        display:-webkit-box;
         -webkit-box-pack:center;
    }
    footer>ul>li{
        width:30%;
    } */
}

老师，我只是给li 中写上了width:30%;就解决了图片中的问题，视频中的老师为什么在媒体查询中给footer写了那么多代码，岂不是冗余了？
为什么不给li设置width:30%，三个li的宽度加起来就会超出ul的宽度，有个回答告诉我这是因为-webkit-box-pack:center;在谷歌中不起作用，可是如果-webkit-box-pack:center;不起作用，这又引来我第三个问题
我给li设置了width:30%;它却在ul中居中分布，我测试了一下，如果将-webkit-box-pack:center;删除，li便靠左分布，而不是居中分布。

唉，这些问题搞得我很晕，请老师解惑

光aaaaand影 2019-06-30

源自：响应式布局 3-4 响应式布局实战(四)

收起

1回答

樱桃小胖子 2019-06-30 14:10:08

老师在媒体查询中做多处配置，会让适配更加严谨一些，尤其是针对老旧的浏览器。代码是灵活的，同学的方法也是可以的

希望可以帮到你！

收起回答

提问者光aaaaand影 #1

老师请您回答一下我第2和第3 个问题，-webkit-box-pack:center到底起作用吗

2019-07-03 10:44:09
提问者光aaaaand影 #2

老师那我所提的第二和第三个问题我该怎么去理解-webkit-box-pack:center;在谷歌中到底起作用吗

2019-07-03 10:50:17
樱桃小胖子回复提问者光aaaaand影 #3

同学你好，-webkit-box-pack:center在谷歌中是起作用的哦

2019-07-03 10:59:20