在小溪里最近做的 “加入我们” 碰到了多字段中英文排序，需要把多个字段按照先英文后中文的方式进行排序。

##初始字段

• 职位名称：中英文，如“Web 前端开发工程师”
• 是否热门：new
• 工作职能：中英文，如“软件研发”
• 工作地点：中英文，如“北京 - 望京”或“北京 - 亦庄”
• 职位详情：HTML 文档

排序具体规则

产品说需要将职位是否热门、职位名称、工作职能、工作地点按照汉语拼音/English 进行排序，相同拼音（字母）开头开头时，按照英文在前面来排，如“Android 工程师”在 “安全工程师”之前。

产品经理制定的排序具体规则：(减号表示降序)

• PC
  • 默认升序： 职能 > 热门 > 职位 > 地点
  • 职位升序： 热门 > 职位 > 职能 > 地点
  • 职位降序： 热门 > -职位 > 职能 > 地点
  • 职能升序： 职能 > 热门 > 职位 > 地点
  • 职能降序：-职能 > 热门 > 职位 > 地点
  • 地点升序： 地点 > 热门 > 职能 > 职位
  • 地点降序：-地点 > 热门 > 职能 > 职位
• 移动端
  • 默认升序： 热门 > 职能 > 职位 > 地点

本文主要列举了调试本地网页、查看测试环境网页的各种方法，涵盖了PC、iPad、移动端的调试技巧。
本文的不足之处在于，小溪里暂时还没有找到调试位于微信中和安卓各国产浏览器上的网页。

前言

小溪里从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()