- .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;
- }
- }
以上就是@media screen判断自适应CSS的详细内容,更多关于@media screen判断自适应CSS的资料请关注九品源码其它相关文章!