响应式布局，利用@media screen实现网页布局的自适应

 

#root {
    font-family: 'Microsoft YaHei';
}

.app-container {
    background-color: #e7ebf0;
    height: 850px;
}

.app-head-bg {
    background-color: #5682a3;
    height: 110px;
}

.app-content {
    margin: 0 auto;
    margin-top: -47px;
    border: 1px solid #5682a3;
    border-radius: 5px;
}

@media screen and (min-width: 960px) {
    .app-content-width { width: 800px; }
}

@media screen and (min-width: 800px) and (max-width: 960px) {
    .app-content-width { width: 740px; }
}

@media screen and (min-width: 400px) and (max-width: 800px) {
    .app-content-width { width: 370px; }
}

@media screen and (min-width: 360px) and (max-width: 400px) {
    .app-content-width { width: 340px; }
}

@media screen and (max-width: 360px) {
    .app-content-width { width: 300px; }
}

.ant-menu {
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}

 

参考：

　　1）利用@media screen实现网页布局的自适应