前言

小溪里从2013年开始接触响应式Web设计，前后做过多个响应式网站，对 CSS3 媒体查询中断点还是有一点理解的。

本文重点探讨的是一个响应式网站的需求：

• 通用型 CSS3 Media Query，尽可能短而简单，容易扩展；
• 在手机上等小屏幕设备上显示的是Mobile版，而在包括iPad、PC端在内的中大型屏幕上要显示的PC版；
• 不借助 JavaScript 的 UserAgent 判断设备或浏览器；
• 咱不考虑 Window Phone 和 Surface Pro，事实上小溪里手上也没这两款测试设备。

我在《响应式Web设计——断点设计》一文中简单阐述了我对断点的理解及运用。

快速审查

问题1：屏幕变宽，页面中可能会出现过多空白区域。应当调节元素宽度或者设置其他方式自动来补充页面留白.

示例： 互联网分析沙龙

最近 Html5 动画非常火，小溪里也在某一个网页中发现了它的踪迹。DEMO（建议在手机微信或者iPad微信上观看）

我在帝都的前端朋友也有问我，这种Html5动画怎么做。这里我把我的研究成果在这里展示一下。

我的这个 HTML5 动画研究是基于 Tween 的高级版 TweenMax 来做的。

为嘛用它
现今非常流行使用github来管理自己的代码，用来展示自己的技术研究。小溪里也不能免俗地喜欢了使用github.io来放置我的个人博客。

##简介
hexo是一款基于Node.js的静态博客框架。目前在GitHub上已有 5160 star 和 814 fork。
hexo 中文官网
Hexo在github上构建免费的Web应用

引言

使用了jQuery插件 jquery.onepage-scroll.js 1.2.1 （下文用onepage-scroll）插件进行修改。具体文章详见 How I Built The One Page Scroll Plugin。onepage-scroll新版本为 1.3.1

本插件的名字为 jquery.pagescroll.js（下文用 pagescroll） ，以向 onepage-scroll 致敬，同时为了有点区别。

功能列表

• 单页/全屏滚动（借鉴）
  • 支持鼠标滚轮、空格键、上下方向键、上下翻页键、上下滑动
  • 在PC和ipad上支持 响应式 操作
  • 在Mobile上支持竖屏滚动，横屏正常拖动
• 支持 header、footer、topSlideNav、pagination
• 手指跟随(未加入阻尼)
• 页面回弹(有阻尼)
• 支持 CSS3 easing cubic-bezier()