轩枫阁

前言

轩枫阁V3.0主题已上线，自2013年上线发布，V1-V3，3年。3个月完成V3主题PC端、移动端交互原型、网页重构、功能开发、工具一键上线。

本次主题的更新，对整站进行优化，主要包括设计改版、性能优化、体验优化。

本文主要针对主题各类技术开发进行总结：

• 主题分离篇
• 重构篇
• 图片优化篇
• 开发篇
• 构建篇
• 加载篇

设计篇：轩枫阁V3主题设计开发总结—设计篇 查看全文

前言

轩枫阁V3.0主题已上线，自2013年上线发布，V1-V3，3年。3个月完成V3主题PC端、移动端交互原型、网页重构、功能开发、工具一键上线。

本次主题的更新，对整站进行优化，主要包括设计改版、性能优化、体验优化。

本文主要针对设计进行介绍：

• 重新思考设计整站UI
• PC端与移动端相分离
• 文案、设计排版、细节表现更加细致

PC端

主颜色

主色调选用浅白、深灰、浅黑、天蓝、青色，使页面简洁、扁平、纯粹。

查看全文

前言

H5持续火热，随着微信公众号、朋友圈、微博等途径可导入大量阅读量，博客网站移动端自适应势在必行。

下面介绍基于wordpress的网站如何实现移动化。

响应式布局

响应式网站设计(Responsive Web design)的理念是：集中创建页面的图片排版大小，可以智能地根据用户行为以及使用的设备环境（系统平台、屏幕尺寸、屏幕定向等）进行相对应的布局。

优点：一套代码，能够适应不同分辨率设备访问，易于维护。

缺点：受限于同一套HTML结构，导致很多差异化布局不好进行扩展，对于小屏设备往往采用隐藏方式减少内容。

自适应框架如Bootstrap、UIKit、Adobe Edge Inspect、Foundation、Responsablecss等。

响应式网站展示：http://mediaqueri.es/、http://flatdesignluv.com/

响应式布局的实现方式为通过CSS3的媒体查询Media Queries，针对不同分辨率做断点，使用不同的样式。

常用断点查询：屏幕尺寸大全、UI设计规范 查看全文

前言

用久了Chrome，发现已经厌倦简洁的New Tab新标签页。而Chrome应用商店的主题又不是很符合自己的口味，不够个性化。我们的需求也很简单，能自定义张壁纸就好。就此研究了下，Chrome主题插件的制作方法。

编写插件

安装：http://xuanfengge.com/demo/201505/chrome-theme/xuanfeng-theme.crx

特点：主要对背景图、按钮颜色、标签栏颜色做优化 查看全文