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

时间:2020-01-06 19:06:46   收藏:0   阅读:75

 

#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实现网页布局的自适应

原文:https://www.cnblogs.com/xy-ouyang/p/12157552.html

评论(0
© 2014 bubuko.com 版权所有 - 联系我们:wmxa8@hotmail.com
打开技术之扣,分享程序人生!