现在让我们来用刚学会的Responsive技巧来制作一个blog前端。

一切从导航开始，例子的Demo大概是这样的：点击查看例子 请尝试拖拽窗口大小，查看响应式效果。

第一步：HTML和CSS实现导航

index.html:

• Home
• Blog
• Works
• About

注意：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:

要实现响应式的布局，就要监测当屏幕大小变化时，重新调整一些元素的位置，大小，样式。

而在这个例子中，我们需要：

1. 重新调整Logo位置，使其居中。
2. 重新调整导航位置，使其在下行占满。
3. 取消掉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; } }

首先不得不说，ADT22就是个大坑，一旦更新，过去稍不符合规定的代码，统统会现出原形来。（其实就是ADT22变得严格了）

FATAL EXCEPTION: main java.lang.IllegalStateException: The application’s PagerAdapter changed the adapter’s contents without calling PagerAdapter#notifyDataSetChanged! 

出这个错，是因为你的PagerAdapter中的数据变了，但是没有调用adapter.notifyDataSetChanged方法。

如果你的代码逻辑是这样的：

class XXX extends asynctask

…

doInBackground(…){

1、获取数据

2、添加到数据池

3、publicProgress()

}

onPublicProgress(…){

4、调用adapter的notifydatasetchanged方法

}

在ADT22中，上面的代码肯定会报错的。为什么？

看下官方文档对 support/v4/view/PagerAdapter 的一个解释：

PagerAdapter supports data set changes. Data set changes must occur on the main thread and must end with a call to <a href="http://developer.android.com/reference/android/support/v4/view/PagerAdapter.html#notifyDataSetChanged()">notifyDataSetChanged()</a> similar to AdapterView adapters derived from <a href="http://developer.android.com/reference/android/widget/BaseAdapter.html">BaseAdapter</a>.

出错原因：数据更新必须在main thread进行更新！！结束前还得调用 notifyDataSetChanged() ！！

也就是说，必须得把上面的2步骤，移动到onPublicProgress中才正常。