@media mediatype and|not|only (media feature) { CSS-Code; }
最近初学css，需要用到设备和电脑端各种页面自适应的情况。当然自然而然就会想到这一个属性：
@media，今天花了1小时左右做了一个自适应的小demo，记录下，如下图所示：
套用了bootstrap主页面的模板，且只用了@media语法（有media属性可以配置，但是我没用），这里用到大概就是bootstrap的栅格系统和@media。
代码块如下所示，直接复制粘贴即可运行。
<!DOCTYPE html> <html> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"/> <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css"> <head> <title>自适应</title> </head> <body> <div class="navbar"> <div class="container"> <div class="navbar-header"><a href="#">自适应demo</a> <button class="change" οnclick="change(this)"><span class="glyphicon glyphicon-align-justify"></span></button> </div> <div id="n1" class="navbar-collapse collapse"> <ul class="nav navbar-nav"> <li class="hidden-sm hidden-md"><a href="http://v2.bootcss.com/">Bootstrap2中文文档</a></li> <li><a href="#">自适应最左边</a></li> <li><a href="">自适应文档</a></li> <li><a href="">less教程</a></li> <li><a href="">自学</a></li> </ul> </div> </div> <div style="text-align: center;font-family:'幼圆'"> <h1>自适应效果显示</h1> </div> <div class="container container-body"> <div class="div_info col-sm-6 col-md-4 col-lg-3"><img width="100%" height="100%" src="http://www.th7.cn/d/file/p/2014/09/28/8543a9ac6d0ade866f7a2fa8f7b5f8b0.jpg"></div> <div class="div_info col-sm-6 col-md-4 col-lg-3"><img width="100%" height="100%" src="http://www.th7.cn/d/file/p/2014/09/28/8543a9ac6d0ade866f7a2fa8f7b5f8b0.jpg"></div> <div class="div_info col-sm-6 col-md-4 col-lg-3"><img width="100%" height="100%" src="http://www.th7.cn/d/file/p/2014/09/28/8543a9ac6d0ade866f7a2fa8f7b5f8b0.jpg"></div> <div class="div_info col-sm-6 col-md-4 col-lg-3"><img width="100%" height="100%" src="http://www.th7.cn/d/file/p/2014/09/28/8543a9ac6d0ade866f7a2fa8f7b5f8b0.jpg"></div> <div class="div_info col-sm-6 col-md-4 col-lg-3"><img width="100%" height="100%" src="http://www.th7.cn/d/file/p/2014/09/28/8543a9ac6d0ade866f7a2fa8f7b5f8b0.jpg"></div> <div class="div_info col-sm-6 col-md-4 col-lg-3"><img width="100%" height="100%" src="http://www.th7.cn/d/file/p/2014/09/28/8543a9ac6d0ade866f7a2fa8f7b5f8b0.jpg"></div> <div class="div_info col-sm-6 col-md-4 col-lg-3"><img width="100%" height="100%" src="http://www.th7.cn/d/file/p/2014/09/28/8543a9ac6d0ade866f7a2fa8f7b5f8b0.jpg"></div> <div class="div_info col-sm-6 col-md-4 col-lg-3"><img width="100%" height="100%" src="http://www.th7.cn/d/file/p/2014/09/28/8543a9ac6d0ade866f7a2fa8f7b5f8b0.jpg"></div> </div> </div> </body> </html> <script type="text/javascript"> function change(obj){ if($("#n1").hasClass("collapse in")){ $("#n1").removeClass("collapse in"); $("#n1").addClass("collapse"); }else{ $("#n1").removeClass("collapse"); $("#n1").addClass("collapse in"); } } </script> <script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <style type="text/css"> @media (max-width: 768px){ .change{ height: 100%; float: right; margin: 15px; } } @media (min-width: 768px){ .change{ display: none; } } </style> <style type="text/css"> .container{ background-color: #2e2e2e; } .container-body{ background-color: white; } .navbar-header > a{ margin: 15px; font-size: 20px; text-align: center; } a{ color: #ccc; } .nav>li>a:hover{ background-color: #2e2e2e; color: white; } .navbar-collapse > ul >li{ } .navbar-header > a{ float:left; } .navbar-header > a:hover{ text-decoration:none; background-color: #2e2e2e; } .div_info{ height: auto; padding: 15px; } .btn-type{ font-size: 24px; } </style>可以看到根据屏幕尺寸的变化，上面导航栏也随之出现变化，最后导航栏的所有条目都进入到一个右上角的按钮中去了。这个demo很简单，只是拿来记录一下自己第一个自适应demo
主要注意的语法是：
以上均为博主自我整理片段，为初学2017.7.11记录。
