今天发现昨天遗留的问题的原因，是由于有一侧的盒子设置了填充，导致页面缩小比例的时候会将其他的内容挤压下去，

将那一侧的盒子填充删除，添加宽高自适应问题解决。

修改的css代码：

* {
    margin: 0;
    padding: 0;
}

.box {
    height: 100vh;
    background-color: #ffffff;
    margin: 0 auto;
}

.navigation {
    background-color: #5fc0cd;
    height: 100px;

}

.navigation img {
    float: left;
    margin: 25px 30px;
}


.navigation p {
    color: white;
    font-size: 36px;
    text-align: center;
    padding-top: 19px;
}


.background {
    height: auto;
    position: relative;
}

.picture {
    width: 100%;
    height: 329px;
}

.head-portrait {
    position:absolute;
    z-index: 10;
    top: 76px;
    left: 28px;

}

.location {
    position:absolute;
    z-index: 10;
    top: 176px;
    left: 240px;
}

.name {
    position: absolute;
    color: white;
    top: 115px;
    left: 240px;
    font-size: 32px;
}

.age {
    position: absolute;
    color: white;
    top: 120px;
    left: 350px;
    font-size: 28px;
}

.position {
    position: absolute;
    color: white;
    top: 170px;
    left: 273px;
    font-size: 24px;
}

.skill {
    height: auto;
}

.skill em {
    display: inline-block;
    font-style: normal;
    font-size: 32px;
    color: #5fc0cd;
    padding: 4% 4%;
}

.skill p{
    display: inline-block;
    font-size: 32px;
    color: #333333;
    font-weight:bold;

}

.introduce {
    height: auto;
}

.briefly {
    width: 40%;
    height: auto;
    display: inline-block;
    border-color: #a6a6a6;

}

.introduce p {
    display: inline-block;
    font-size: 32px;
}

.introduce em {
    font-size: 32px;
    display: inline-block;
    font-style: normal;
    color: #e1e5e7;
    margin: 1%;

}

.dormitory {
    display: inline-block;
    margin: 3% 2% 0 5%;
}

.restaurant {
    display: inline-block;
    margin: 0 3% 0 0;
}


.content {
    display: inline-block;
    font-size: 32px;
    text-align: center;
    padding: 5%;

}

.time {
    display: inline-block;
    font-size: 32px;
    text-align: center;
    padding: 5%;
}

.hourly-wage {
    display: inline-block;
    font-size: 32px;
    color: red;
    text-align: center;
    padding: 5%;

}

.self-introduction {
    height: auto;
    border-top-style:solid;
    border-color: #a6a6a6;
    margin-left: 3%;
}

.self {
    display: inline-block;
    font-size: 32px;
    color: #a6a6a6;
    text-align: center;
    width: auto;
    height: auto;
}

.frame {
    width: auto;
    height: 25px;
    border-color: #e1e5e7;
    border-right-style:solid;
    display: inline-block;
    padding-left: 5%;

}

.fragment {
    height: 100%;
    width: 50%;
    display: inline-block;
}

.information {
    display: inline-block;
    font-size: 28px;
    text-align: center;
    padding: 5%;

}

.contact-information {
    height: auto;
}

.respond {
    display: inline-block;
    float: left;
    border-style: solid;
    border-color: #5fc0cd;
    width: 45%;
    height: 80px;
    border-radius: 10px;
    /*margin: 10% 2%;*/
    margin-top: 10%;
    margin-right: 2%;

}

.respond p {
    text-align: center;
    color: #5fc0cd;
    font-size: 32px;
    margin-top: 17px;
}

.telephone {
    display: inline-block;
    background-color: #5fc0cd;
    float: right;
    width: 45%;
    height: 80px;
    border-radius: 10px;
    /*margin: 10% 2%;*/
    margin-top: 10%;
    margin-right: 2%;

}

.telephone p {
    text-align: center;
    color: white;
    font-size: 32px;
    margin-top: 17px;

}

页面效果：

明天计划：将第二张示图修改。