.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; } }
版权声明:除特别声明外,本站所有文章皆是本站原创,转载请以超链接形式注明出处!