接着上次的 viewport 使用笔记 - 1，文中只说了在 metatag 中设置页面的 viewport，这只是方式一，等于将控制权交给了 HTML。下面就来记录一下另一种在 CSS 中定义的方式 - @viewport，这样一来布局职能就属于 CSS 来掌控了，或许这种设备适配方式才是正确的吧。

viewport meta标签并不具有“规范性”，即它不是W3C的正式标准，也非Web标准。
@viewport 目前也处于草案阶段
via - W3C - css-device-adapt

@viewport

使用 @viewport CSS 规则控制 viewport，与在 HTML 中的 meta 标签效果一样。

1
2
3
4
5
6
7
8
9
10
11
12

@media screen and (max-width: 400px) {
    @-ms-viewport{
        width: 320px;
        /* the viewport for small devices is set to 320px  */
    }
    @-o-viewport {
        width: device-width;
    }
    @viewport {
        width: device-width;
    }
}

@viewport 支持情况，仅 IE10+, Opera11+, Opera Mobile 支持，且需要加上私有前缀。

说明

用默认 width 的值 device-width，来设置 viewport 的宽度。与 meta 标签中设置的 content="width=device-width" 效果相同。

上面这个 example 中 @-ms-viewport 这里需要着重说明下，IE10会忽视掉那些宽度小于400像素的元窗口标签（在“snap mode”下），添加浏览器前缀，确保各浏览器里的渲染效果是一致的。

实践

在项目中使用了 twitter bootstrap，里面的 grid system，其中也有 Media queries 这一部分。看下了它对不同终端的划分情况，大致分为 4 个区间，自己对各终端的适配也没有足够的经验，所以在项目的 grid 构建中，也是按照他们的规格去尝试，下面对这一部分的使用记录一下。

• 规格说明

  • bk-col-width: 16px (栅格宽度)
  • bk-col-gutter: 5px (间隙宽度)
  • bk-screen-sm: 750px (移动设备)
  • bk-screen-md: 1000px (平板，普屏PC)

  • bk-screen-lg: 1200px (宽屏设备)

    这些变量已经在 _grid.scss 中定义好了，方便后期重新定制。

• 初步规划

  为了满足响应式布局，目前做了如上所示的3种规格，适应不同分辨率的终端，以下是具体说明

  • 屏幕尺寸 max-width: 750px，即小于或等于 749px，横向滚动条出现
  • 屏幕尺寸 min-width: 750px ~ max-width: 1000px，即 750px ~ 999px，内容区域 bk-con = 692px(bk-col27) 此分辨率适应移动终端
  • 屏幕尺寸 min-width: 1000px ~ max-width: 1200px，即 1000px ~ 1199px，内容区域 bk-con = 926px(bk-col36) 平板，普屏PC
  • 屏幕尺寸 min-width: 1200px，即大于或等于 1200px，内容区域 bk-con = 1160px(bk-col45) 宽屏PC

• 备注

  后期经过实际的应用测试，发现此栅格并不适合各种场景，特别是 bk-col-gutter: 5px，这样一来左右相邻的两个模块间隙只有 10px，感觉留白过少，所以此处还是应该再做调整。

参考资料

• Web Platform Docs - @viewport
• @-ms-viewport rule
• IE10里的捕捉模式和响应式设计

近期的新项目，设计初期打算引入响应式设计，前期我们也做了部分调查和实验。分析了一下，有一个困扰的问题就是，你的站需不需要响应式设计？但是，我们目前打算是今后的移动终端端也能直接使用目前的设计（一次设计），而不需要再花费精力去重新设计和实现（普遍适用）。

有了这些需求之后，就不再纠结了，配合设计组的同学，我们初步定了一下实施计划，目前只是做尝试性的准备工作，构建了部分基础测试页，在各种分辨率的设备中测试了一下，达到了预期的展示效果，但是后期拿到具体内容之后，还得细细的琢磨，重构之。

以下就来记录一下，工作之中遇到的问题。

上一个版本的项目，后期改版中使用了 1200px 总宽设计，当然这里只考虑了 monitors 中的应用场景。在接到这个需求之后，好吧直接上手改了 container 的宽度。当然，前提是已经忽略掉了小分辨率的 monitors（低于这个分辨率，出现横向滚动条），所以后期的分辨率测试工作就省事多了，而且正常的展示效果也不错，因为站点的页面正好是内容展示型的，相比之下，内容是多了一部分。

接下来就测试 phone，tablets，然后等待我的是。。。

当然了不会原样缩小，乖乖的占满整个屏幕。好吧，那我缩小一下，然而部分内容在我 resize 之后，并没有渲染出来。这时我才意识到了问题的严重性，看来针对移动终端得特殊处理一下。Google 之后才得知各设备的 device-width [^1]。viewport 标签就是针对移动终端所制定的吧，提升页面在移动设备上的表现能力。让页面的宽度和初始比例可以和移动设备相匹配。

这下问题就迎刃而解了。

iOS上的Safari在加载网页时默认会自动将页面宽度设为980像素，这是大多数固定宽度网页的尺寸。随后Safari会缩小页面，以便适合在320或480像素宽的视口中显示。

后续搜索，并测试了，Android 设备默认 viewport-width 是 800px。（Windows Phone 设备则为 1024px，这个 google 得来的，手头并没有设备）。下面这个标签的前世今生，就不做说明了，有兴趣的可以自己去查。

1

<meta name="viewport" content="width=device-width">

上面只是基础定义，下面列举一些基本属性，后续需要自己去慢慢研究了。

initial-scale: 初始缩放比例，也即是当页面第一次 load 的时候缩放比例
maximum-scale: 允许用户缩放到的最大比例
minimum-scale: 允许用户缩放到的最小比例
user-scalable: 用户是否可以手动缩放
…

我们页面的宽度是1200，所以在初始的时候定义content="width=1200"就搞定了，浏览器会自动缩小页面，以便适合在 320px 尺寸的 viewport 中显示。iPhone，iPad的横竖屏中，device-width 都不相同，这个在相应式设计中得充分考虑到。

这次研究也就到这里了，下期准备放出我们最近测试后的响应式布局方案，这个 viewport(只是初始化) 和 css3 中的 media query 简直就是天生一对。

[^1]: 各设备尺寸 - screensiz.es

之前就知道有 CSS 预处理器（css preprocessor）这么个概念，但是却一直从未上手实践过，现在看来自己专业技能进步的如此缓慢，嗯，一定是实践能力太弱导致的。

CSS 其实只是个设计工具，个人感觉和编程还是有点距离的，难怪后端程序员们看到这个会觉得处理这些是件很麻烦的事情。只能一行行的如实描述，没有变量、常量、编程语法等，有时候真的感觉难以组织和维护。比如我们项目中产品的迭代，有时候用户需求改变之后，产品要快速的做出响应，有时样式文件做出大的改动，在后期代码的维护上就比较头疼了，因为代码本身耦合度就较高。

这时 CSS 预处理器就应运而生了。CSS 预处理器定义了一种新的语言将 CSS 作为目标生成文件，然后开发者就只要使用这种语言进行编码工作了。预处理器通常可以实现浏览器兼容，变量，结构体等功能，代码更加简洁易于维护。

在本地安装好之后，顺着 SASS 官方文档，她的 Features 足以让我惊呆！下面就来挨个做个简单亮相吧！

一、 SASS

SASS - Syntactically Awesome Stylesheete
它的基本思想是，用一种专门的编程语言，进行网页样式设计，然后再编译成正常的 CSS 文件。

二、 安装&使用

SASS 是用 Ruby 写的，所以得先安装 Ruby。OS X 和 Linux 用户可忽略此步。

1
2
3

gem install sass    
sass style.scss     
sass style.scss style.css

安装好之后，创建普通的文本文件 style.scss，根据官方的上手指南先写入简单的 Sass Stylesheet。

1
2
3
4
5

/* style.scss */    
#navbar {
  width: 80%;
  height: 23px;
}

官方首页的 demo 里，你会发现有种语法，表面在我看来就是 .scss，.sass，扩展名的不同，然后就是书写格式的差异，介绍里是这样说的“.scss 这种扩展名对应的语法一般用的最多，她是 CSS3 的一个超级集合，所以说对 CSS3 的支持也是比较良好”，而“.sass 我猜测应该是 SASS 刚推出时默认采用的吧，她的语法就我目前看来主要体现在书写格式上，只用行缩进来指定代码块，没有和原生 CSS 所相近的 {}，;”，下面就以 SCSS 语法为主，介绍一些令我和小伙伴们都惊呆了的特性！当然了，这种语法只是在书写格式上有区别，功能上完全一样，选个自己喜欢的开始吧！

三、特性概览

Nesting - 嵌套

原生 CSS 在嵌套时可不能省事儿，一层层一行行都得如实书写，而 SASS 允许你在父级里进行嵌套书写，非常省气力。注意你的括号和缩进！

1
2
3
4
5
6
7
8
9
10

#navbar {
  width: 80%;
  height: 23px;

  ul { list-style-type: none; }
  li {
    float: left;
    a { font-weight: bold; }
  }
}

引用父级，用到了 SASS 约定好的特殊字符&

1
2
3
4
5

a {
  color: #ce4dd6;
  &:hover { color: #ffb3ff; }
  &:visited { color: #c458cb; }
}

Variables - 变量

SASS 中允许使用变量，她可以用来定义 CSS 属性。

1
2
3
4
5
6
7

$main-color: #ce4dd6;
$style: solid;

a {
  color: $main-color;
  &:hover { border-bottom: $style 1px; }
}

Interpolation - 嵌入

在 SASS 中定义的变量不仅可以用在属性值里，还可以用#{}嵌入在字符串里写在选择器下。这里需要注意的是对#{}的闭合要仔细检查，难免会和选择器自身的混淆！

1
2
3
4
5
6
7
8

$vert: top;
$horz: left;
$radius: 10px;

.rounder-#{$vert}-#{$horz} {
  -webkit-border-#{$vert}-#{$horz}-radius: $radius;
  border-#{$vert}-#{$horz}-radius: $radius; 
}

Operations - 计算

支持标准的数学运算 (+, -, *, /, and %)

1
2
3

li {
  width: $navbar-width/$items - 10px;
}

Functions - 函数

粗略的浏览了一遍，这些都是处理系列颜色值的函数，有了这些你也可以快速的生成系列颜色。难怪看到人家 UI 组件里的颜色过渡，渐变，同色系颜色的取值上感觉很舒服，有了这些函数让你能够快速的处理出来系列颜色，即使你不是很懂色值的微调。不过我相信，在你看到函数里的那些RGB，HSL，alpha，rgba…肯定还是会很头疼的 >_<，就简单的介绍几个函数，实在不敢继续深究了。

1
2
3
4
5
6
7
8
9
10

rgb(26, 188, 156);
// 根据给定的rgb值，计算出一个十六进制颜色值 #1abc9c
rgba(blue, 0.8);
// rgba(0, 0, 255, 0.8)，将一个颜色根据透明度转换成rgba颜色
lighten(#1abc9c, 10%);
// #28e1bd，lighten和darken都是给颜色亮度值做调整
grayscale(#1abc9c);
// #6b6b6b 变成灰色咯
invert(#1abc9c)
// #e54363 根据颜色中的R、G、B单独进行反相，然后合并到一起

Mixin

这算是 SASS 中的一大强有力的亮点，我个人理解她是一个可定义的代码块，以便用来重复使用。下面这里示例写的有点水啊 :-\

1
2
3
4
5
6
7
8
9
10
11

@mixin border {
  $color: #1abc9c;
  $style: solid;
  $width: 1px;
  $radius: 2px;

  border-color: $color;
  border-style: $style;
  border-width: $width;
  border-radius: $radius;
}

Arguments - 参数

上面那个示例中，在自定义代码块时，起处定义了几个变量，是不是看起来略显麻烦了，而这而所介绍的功能应该就是 Mixins 的强大之处了。再来改进一下

1
2
3
4
5
6
7
8

@mixin border($color, $style, $width, $radius) {
  border-color: $color;
  border-style: $style;
  border-width: $width;
  border-radius: $radius;
}

#box { @include border(#1abc9c, solid, 1px, 2px); }

@import

这个功能其实在 CSS 中就有用到，引入外部文件，不过在 SASS 中引入功能更加强大！
比如将 module 组件以单独的命名的 _clearfix.sass 文件存放

1
2
3

@import "border"; //将代码块存为_border.sass，然后引入
@import border.scss //直接以文件名形式引入
@import style.css //CSS文件的引入

Comment - 注释

• SASS 支持标准的 CSS 注释/* comments */
• 单行注释// comments
• 重要注释/*! comments */在/*后面加!，表示这是”重要注释”。即使是压缩模式编译，也会保留这行注释

Output Style - 编译输出

SASS 给出了四种编译风格，SASS - Output Style

• :nested 标准的嵌套缩进
• :expanded 没有嵌套缩进
• :compact 每个选择器的样式，均以单行形式输出
• :compressed 整个样式文件只有一行，常用于生产环境
• sass --style expanded style.sass style.css

高级功能

还有些更高级的功能，比如循环、条件语句，自定义函数之类的高级功能就先不做介绍了，等我将以上这些基础功能都实践过之后，一起起来进阶篇，THX :-)

开发工具

现在手上的开发工具还是以 jetbrains家的为主。家里笔记本屏幕小、配置低，主要用 sublime text 2，写文章都是在家里，本文里的示例也都是在这个下面编辑的，以下就简称ST2吧。

我用的版本是 2221，默认还不能支持 SASS 文件的语法高亮，需要安装插件，分别是 sass，sass build。安装好之后，就有代码高亮支持，若还是没看到效果，请手动为当前 sass 文件指定syntax，对应的菜单位置：“View - Syntax - Sass”。

另外就是在ST2中进行编译，对应的菜单位置：“Tools - Build”，快捷键为“Ctrl+B”，这时你在 Console 中就能看到编译状态，默认在当前目录生成一个编译后的同名 CSS 文件。

overwrite D:\sass/style.css
[Finished in 1.2s]

果然是神器啊，之前一直都在“命令提示符”里敲命令编译的这种事儿，我会随便乱说？

本文终于可以暂告，每天都说抽时间写一点，结果足足拖了两周之多，该狠狠的扇自己了！里面主要还是以官方文档为主，虽然英文的看起来吃力点，那就手头常备字典咯，遇到代码看不明白的，就再仔细去读一遍说明，这样以来能更好的理解。

工具有很多个，为了提高自己的产出而花时间来学习，还是很有必要的！让自己的代码数量在增加的同时，更应该提高质量，书写优雅的代码，带着一颗热忱的心。

我是 Harry，晚安！

目前说到Icon Font已经不是什么新鲜词了，本站当初在构建时就考虑到想要尝试这一新鲜技术。还有就是想在下次项目中得到使用。

主要还是CSS3里自定义字体(@font-face)，现在各大浏览器都已经支持，即使是古老的IE系列，也已经得到了很好的支持。

至于优缺点，大致说说我们之前用图片时的经历。先是将各种小图标拼合处理（其实使用了一些autosprite工具之后，好像这些也都能够很容易的处理完），图标尺寸，颜色，文件格式等一系列问题。当你使用字体图标之后，文件大小得到了有效的控制，图标自身的属性（颜色、大小、透明）修改起来非常方便。但是制作字体图标，也增加了重构的成本，相比后期维护会省时省力很多。

下面大概就说一下Icon Font的基础使用，至于Icon Font的制作部分打算在今后的文章里做深入介绍，因为要用到字体制作软件，其实也就是将Icon的矢量图导入字体里即可。

开始使用

• 在CSS中先使用font-face字体声明，以下使用的code均来自icomoon，其中在icon是的使用上，有两种方法，一是在标签上用data-属性，另一种是使用class

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43

@font-face {
    font-family: 'icomoon';    
    src:url('fonts/icomoon.eot');    
    src:url('fonts/icomoon.eot?#iefix') format('embedded-opentype'),    
        url('fonts/icomoon.woff') format('woff'),    
        url('fonts/icomoon.ttf') format('truetype'),    
        url('fonts/icomoon.svg#icomoon') format('svg');    
    font-weight: normal;    
    font-style: normal;    
}

/* Use the following CSS code if you want to use data attributes for inserting your icons */    
[data-icon]:before {    
    font-family: 'icomoon';    
    content: attr(data-icon);    
    speak: none;    
    font-weight: normal;    
    font-variant: normal;    
    text-transform: none;    
    line-height: 1;    
    -webkit-font-smoothing: antialiased;    
}

/* Instead of a list of all class selectors, you can use the generic selector below, but it's slower:[class*="icon-"] { */
.icon-newspaper, .icon-office, .icon-pencil {    
    font-family: 'icomoon';    
    speak: none;    
    font-style: normal;    
    font-weight: normal;    
    font-variant: normal;    
    text-transform: none;    
    line-height: 1;    
    -webkit-font-smoothing: antialiased;    
}    
.icon-newspaper:before {    
    content: "\e000";    
}    
.icon-office:before {    
    content: "\e001";    
}    
.icon-pencil:before {    
    content: "\e002";    
}

• 页面中的使用

1
2

<div class="fs1" aria-hidden="true" data-icon=""></div>
<span aria-hidden="true" class="icon-newspaper"></span>

以上示例来自于icomoon，再赞叹此服务如此NB的时候，自己不禁又……上手容易，而且本身提供了好几个图标库，日常使用基本足够，要是难以满足，还可以导入自己的SVG文件之后，重新打包生成，这些都是没问题的。

经过简单的几部之后，基本就可以按照你的要求，打包下载。还有一些细节部分，就不一一说明了，在你尝试之后绝对会有惊喜！

说到Font Icon，还有一个不得不提的就是Font Awesome，这套图标是Twitter Bootstrap中用到的，现在除了自身起初用到的部分，已经扩充到361 Icons，各种特点和使用就不一一介绍了，有兴趣的可以去官网一探究竟！

北京时间2013-07-02下午3点左右，Google Reader正式宣告关闭，所有功能已经不可用，并且谷歌在页面中贴出公告，宣告了这款陪伴互联网用户多年的产品正式告一段落。

其实在当天早晨，还特地打开看了一下，oh……能正常访问，难道是Google忘记关闭了么？殊不知欧美时间才是2013-07-01晚间，所以才会。。

Google Reader于2005年10月7日通过Google实验室发布，中文版Google阅读器在2007年9月18日左右发布，2013年3月13日Google宣布将于2013年7月1日终止Google Reader服务。用户可以通过Google Takeout导出自己的数据。

在宣布关闭之后，曾经去尝试过Feedly等一些替代产品，无奈这货速度好慢，已经尝试着将自己的订阅数据导出了。国内的替代产品，鲜果在宣布关闭之后，服务器一度被挤爆，后来也没有再折腾了。

还记得刚开始订阅量比较少，还能读的过来，等后来碎片就积少成多，一度1000+，再后来真心就读不过来了。

好在最后时刻一直登陆着，送他一程！走好……R.I.P

最近天气热了起来，难免有时会心浮气躁的，可能是自身不够强大的原因吧。让我一度没有了动力去继续下去。一味的去逃避，这样下去终究是没有任何意义的，所以还是得适时的自我调整。

心情好的时候，干啥啥都爽；心情不好的时候看什么都是满满地厌恶，特别是在工作中。因此这几天还把某人给惹了，听起来有点大逆不道，但是为此双方而产生的不愉快倒是大可不必的。但是往往因为单方面的原因，常在这个时候会产生很多的不愉快，看来心情不好的时候对人，对事是有百害而无一益的，所以以后要尽可能的在心情不好的时候去避免工作，不去何人打交道。但是在这期间我不可能做到与世隔绝，所以还是要从自身出发，外界有太多不可抗拒的因素。我是一个不善于交流的人，往往都是一个表情挂在脸上，以至于某人说我太闷，说我常吊个脸…我何尝不想谈吐优雅、幽默风趣！

性格决定命运，性格对一个人的态度、行为、心理等都会产生很大的影响，这个还是得从自身逐渐的去发现并一一改正。先从培养工作中、生活中的习惯做起。

站起来做做运动，洗漱一下准备去上班了！

这注定是一片流水帐！前几天看到 Farbox 的博客更新，虽然讨论的是专业知识，但是其中的文艺感是十足的，都说搞IT的男纸很文艺，看来的确是这样子的。虽然我不知道老大的性别 O_o

这次购买正好赶上了国行版本发布，一并发布的还有Kindle Fire HD。等了两年之久，我大亚马逊终于入华。单就大陆定价来说，其实还算公道。不过我买的是日版！请不要鄙视我 :-)

在淘宝上找的日亚代购，从我下单到收货（代购在日亚购买，发货，过关，到我手里），只用的短短的4天时间，其实是第5天才到我手里，因为前一天下午大雨取消派送了。在北京过关的，卖家说这小东西一般不会被税的，果然是这样，就当是自己人品好！

Kindle Paperwhite技术和各项参数，我就不再多说了，主要说说我个人的体验吧。亚马逊官方数据说的是如果每天阅读半小时，在无线连接关闭的情况下，可持续工作八周。在我个人使用情况来看，平时了连接wifi接收推送，每天阅读半小时，起码坚持一周是没有任何问题的！

• 机身尺寸小巧，单手持不是很累，平时用nexus7，单手竖握时间长了比较累。Kindle Paperwhite背面采用了类肤材质手感极佳，不过就是我爱出手汗，容易留指纹，但这又何妨？
• 2GB的存储空间，除过系统之后还有1.3GB，要是看PDF多点，这个容量还是听吃紧的。到手之后已经升级为国行5.3.5，绑定.cn的账户，商城购买推送都没问题。不过在下一刻，我就换到多看了。因为之前在nexus7上，多看用的比较多一些。而且粗略看了一下，多看功能稍微丰富了那么一点，比如屏保自定、EPUB O_o 不过官方的又带有简易浏览器 -.-||| 其实说到功能上，像KPW这类产品，越是功能单一越好，因为目前这些功能都已经可以由智能手机替代了。
• Kindle支持的格式有限，主要有：AZW，MOBI，TXT，PDF，HTML，DOC，DOCX，JPEG，GIF，PNG，BMP等。不过我个人换到多看之后，基本只看了常用的格式，PDF看起来确实有点伤，翻页，残影，闪动，迟钝这些都还能够接受，看书时只是静下心来慢慢阅读，其余的这些都不在考虑范围之内。所以说目前单纯的电子阅读设备，KPW是你的首选。
• 系统操作上，因为功能单一，这个还是很容易上手的。带回家之后老爸和小萌萌都玩了，只给他们说了能触摸，然后就……其实自己上手之后，稍微摸索一会，基本就没问题了。比如添加书签，字体，排版的调节。
• 亚马逊官方商城和多看商城里的书目类别还挺多，我没有细细翻阅，主要去看了之前自己买的几本实体书，去做了下对比，单纯的文字排版没问题，就是夹杂表格，代码之后，这个排版就有点难以忍受了。

• 值得骄傲的就是这个电子墨水显示屏，到货开封之后就给同事拿去看了，他们从开机到触摸操作，说这屏幕果然很不错，总之第一眼看上去很舒服。

  人眼会自动适应环境的光亮强度，所以在昏暗的光线下阅读时需要偏弱的亮度，在明亮的日光下需要偏强的亮度。Kindle Paperwhite电子书阅读器有亮度调节功能——从微暗到强亮，让用户在任何光线环境下都能享受绝佳的阅读体验。

  Kindle Paperwhite的电子墨水显示屏的显示效果接近打印页面效果，并且在户外强光以及户内弱光都可以保持一致的阅读体验。相比之下，iPhone/iPad等设备使用的是明亮、背光式的液晶显示屏，不利于在明亮光线下阅读，在强烈阳光直射下甚至无法阅读，长期阅读容易引发眼睛疲劳，只适合在户内进行阅读。

  当然，iPhone/iPad液晶显示屏也有一些优点，例如明亮、彩色、全触摸，翻页刷新非常迅速，可以实现炫酷的3D翻页效果，而电子墨水显示屏也有一些缺点，例如黑白显示，页面无法象液晶显示屏那样迅速刷新，相比iPhone屏幕来说，电子墨水显示屏更易碎，最好用皮套保护一下。

  综合来看，电子墨水显示屏相比液晶显示屏在阅读体验上具有明显的优势。via - 月光博客

我个人还购买了皮套，平时携带时保护屏幕，据说是易碎，所以大家在使用途中还是要多加注意的，皮套还有唤醒，休眠功能，省得去按键。其实就是在脚部加入了磁铁，有兴趣的朋友可以自己DIY。

相册里面放了几张多看系统下的截图，有兴趣的朋友可以移步过去看看 :-)

爱阅读，好文艺的你值得去购买！便携，轻巧，单纯……

####1. 页面中引用的<img/>标签，为图像指定height和width属性是一个好习惯。

1. 如果设置了这些属性，就可以在页面加载时为图像预留空间。如果没有这些属性，浏览器就无法了解图像的尺寸，也就无法为图像保留合适的空间，因此当图像加载时，页面的布局就会发生变化。
2. 不要通过height和width属性来缩放图像。如果通过height和width属性来缩小图像，那么用户就必须下载大容量的图像（即使图像在页面上看上去很小）。正确的做法是，在网页上使用图像之前，应该通过软件把图像处理为合适的尺寸。
3. 并且强烈建议按需加入alt，title属性，比如用户头像等。
   <img src="./mouse.jpg" height="200" width="200" title="" alt="" />

####2. 图片格式

1. 普通背景图一律使用PNG-8;
2. 半透明效果使用PNG-24，若要兼容IE6需使用兼容图，并且在CSS中_bakcground引入；
3. 大尺寸，颜色较多的图片，使用“存储为web格式”并适当调整图片品质，找到文件大小于图片质量的平衡点；

####3. 背景图处理

1. 必须使用CSS Sprite拼合CSS背景图，减少页面HTTP请求；
2. 按类型区区划分背景图，比如多个类型拼合在一张图里；
3. 拼合时每个背景元素之间需保持间距，目前定位10PX；
4. 多人协作时，需要将PSD资源文件同步进SVN上，每次更改PSD文件，再导出资源图；若有修改PSD文件，请及时告知其他同学，其他人在修改时需先update，再修改，保持PSD文件为最新，保证版本统一。

以上内容为之前项目中遇到的问题，和今后需要注意的，从网上收集，并加以整理。

因为经验和能力等，实际实施起来，并未能达到预期的理想目标，导致后期整个项目的维护和后续的开发上存在部分问题。完善文档，让我们的开发更有节奏，更加规范。

最近在GitHub Pages里提交了新的文件之后，看状态是提交成功了。但是刷新之后仍然无果，这不科学啊，以往都是秒更新的。难道今夜提交，明天才给我更新啊，有点太晚了，就洗洗睡了。

第二天打开邮箱，全是”page build failed”，这就有点犯晕啊，也没有其余的提示内容。手头也没有本地的环境用作测试，只好先借助Google，看样子应该是GitHub这边的Jekyll版本更新之后，出现了这个问题，更换搜索关键词继续，然后心里大概明白了，更改了Jekyll中Markdown的渲染引擎，之后就无忧了。

具体方法：修改配置文件_config.yml，
markdown: kramdown，改为markdown: redcarpet，
如果没有这一行，
在pygments: true的上面添加markdown: redcarpet。

这里的正是为Jekyll指定需要用到的Markdown渲染引擎。
尝试着该过之后，再次刷新Blog，新的post已经看到了。

Jekyll 原生支持 kramdown，maruku，rdiscount，redcarpet 等 Markdwon 渲染引擎

感谢：

• Jekyll 0.12.0新特性简介
• 为 Jekyll 装上瑞士军刀 Pandoc

这次又是代开箱了，等了好几天，朋友买的 Lumia 920 终于寄到我这里来了，闲话少说，先上图了……

后续：用了这么多天了，体验上、硬件上是没的说，怎么也算是诺基亚的旗舰机型了，不过软件上确实很坑啊，在应用市场里翻了翻，貌似就快翻到头了，常用的软件即使都有了，但是更进一步的体验还是要从各种应用上感觉的出来，所以说这次诺基亚又让微软给坑了。

照片先放一张，其余的请移步到相册中查看。