@media screen判断自适应CSS

前端开发   发布日期:2023年05月05日   浏览次数:579
  1. .abc{ height:300px; border:1px solid #000; margin:0 auto} 
  2. @media screen and (min-width: 1201px) { 
  3.     .abc {width: 1200px} 
  4. } 
  5. /* css注释:设置了浏览器宽度不小于1201px时 abc 显示1200px宽度 */ 
  6. @media screen and (max-width: 1200px) { 
  7.     .abc {width: 900px} 
  8. } 
  9. /* 设置了浏览器宽度不大于1200px时 abc 显示900px宽度 */ 
  10. @media screen and (max-width: 901px) { 
  11.     .abc {width: 200px;} 
  12. } 
  13. /* 设置了浏览器宽度不大于901px时 abc 显示200px宽度 */ 
  14. @media screen and (max-width: 500px) { 
  15.     .abc {width: 100px;} 
  16. } 
  17. /* 设置了浏览器宽度不大于500px时 abc 显示100px宽度 */
  18. 需要注意是CSS代码顺序,由大到小排版CSS(判断浏览器宽度越大越放前),这样是因为逻辑关系,@media 判断CSS排错将导致判断失效。
  19.  
  20.  
  21. @media all and (min-width: 320px) and (max-width: 480px) {
  22.     .form-horizontal .control-label {
  23.         font-size:14px;color: #999999;
  24.         margin-bottom:10px;
  25.     }
  26. }


以上就是@media screen判断自适应CSS的详细内容,更多关于@media screen判断自适应CSS的资料请关注九品源码其它相关文章!