响应式设计

采用百分比的形式

“响应式设计（Responsive Design” 是一种让网站针对不同的浏览器和设备“呈现”不同显示效果的策略，这样可以让网站在任何情况下显示的很棒！

媒体查询是做此事所需的最强大的工具。让我们使用百分比宽度来布局，然后在浏览器变窄到无法容纳侧边栏中的菜单时，把布局显示成一列：

 

@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; }

}