现在让我们来用刚学会的Responsive技巧来制作一个blog前端。
一切从导航开始，例子的Demo大概是这样的：点击查看例子 请尝试拖拽窗口大小，查看响应式效果。
第一步：HTML和CSS实现导航
index.html:
注意：index.css 的宽度要用百分比来计算，这样在页面大小变化的时候，整个框架也会按比例放缩。
.container{ width:90%; height: auto; margin:0 auto; margin-top:20px; background-color: #fff; -webkit-box-shadow: 0 0 10px rgba( 0, 0, 0, .1 ); -moz-box-shadow: 0 0 10px rgba( 0, 0, 0, .1 ); box-shadow: 0 0 10px rgba( 0, 0, 0, .1 ); } div#logo{ float: left; padding-top: 7px; width:25%; } div.navigation{ height: 80px; } div#nav{ width: 75%; float:right; } #nav ul{ margin-top:25px; list-style: none; } #nav ul li{ float: left; width:20%; text-align: center; font-size:1.5rem; }
第二步：实现Responsive.css:
要实现响应式的布局，就要监测当屏幕大小变化时，重新调整一些元素的位置，大小，样式。
而在这个例子中，我们需要：
- 重新调整Logo位置，使其居中。
- 重新调整导航位置，使其在下行占满。
- 取消掉logo和ul > li的浮动，防止页面出现错误。
@media screen and (max-width: 480px){ div#logo{ width: 100%; text-align: center; margin-left: 0; padding-left: 0; } div#nav{ width: 100%; } div#nav ul{ float:none; margin-left: 0; padding-left: 0; width: 100%; } div#nav ul li{ float: none; width: 100%; margin-right: 0; margin-left: 0; padding-top:10px; padding-bottom: 10px; background-color: #fff; } }