CSS 媒体查询（Media Queries）
响应式设计 - Responsive Design 是一种让网站针对不同的浏览器和设备“呈现”不同显示效果的策略，这样可以让网站在任何情况下显示的很棒！
CSS Media Queries - 媒体查询
媒体查询是做此事所需的最强大的工具。让我们使用百分比宽度来布局，然后在浏览器变窄到无法容纳侧边栏中的菜单时，把布局显示成一列：
@media screen and (min-width:600px) {
nav {
float: left;
width: 25%;
}
section {
margin-left: 25%;
}
}
@media screen and (max-width:599px) {
nav li {
display: inline;
}
}
<div id="container">
<section> - 1
<section> - 2
当你调整浏览器窗口大小时（缩放到最小），布局比以前更酷了！
</section>Quickly design and customize responsive mobile-first sites with Bootstrap, the world’s most popular front-end open source toolkit, featuring Sass variables and mixins, responsive grid system, extensive prebuilt components, and powerful JavaScript plugins.
</section>CSS 媒体查询额外注意
使用 meta viewport 之后可以让你的布局在移动浏览器上显示的更好。