@media screen判断自适应CSS

寻技术 Html/CSS / React 2023年07月08日 104
.abc{ height:300px; border:1px solid #000; margin:0 auto} 
@media screen and (min-width: 1201px) { 
    .abc {width: 1200px} 
} 
/* css注释:设置了浏览器宽度不小于1201px时 abc 显示1200px宽度 */ 
@media screen and (max-width: 1200px) { 
    .abc {width: 900px} 
} 
/* 设置了浏览器宽度不大于1200px时 abc 显示900px宽度 */ 
@media screen and (max-width: 901px) { 
    .abc {width: 200px;} 
} 
/* 设置了浏览器宽度不大于901px时 abc 显示200px宽度 */ 
@media screen and (max-width: 500px) { 
    .abc {width: 100px;} 
} 
/* 设置了浏览器宽度不大于500px时 abc 显示100px宽度 */
需要注意是CSS代码顺序,由大到小排版CSS(判断浏览器宽度越大越放前),这样是因为逻辑关系,@media 判断CSS排错将导致判断失效。


@media all and (min-width: 320px) and (max-width: 480px) {
    .form-horizontal .control-label {
        font-size:14px;color: #999999;
        margin-bottom:10px;
    }
}


关闭

用微信“扫一扫”