viewport 使用笔记 - 2

接着上次的 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,感觉留白过少,所以此处还是应该再做调整。

参考资料

viewport 使用笔记 - 1

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

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

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

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

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

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

这下问题就迎刃而解了。

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

后续搜索,并测试了,Android 设备默认 viewport-width800px。(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

SASS 快速上手

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

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

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

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

http://sass-lang.com

一、 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基础使用

目前说到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文件之后,重新打包生成,这些都是没问题的。

icon-font-basic-used-1

icon-font-basic-used-2

icon-font-basic-used-3

icon-font-basic-used-4

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

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

Google Reader正式关闭

北京时间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

google reader

心情好和心情坏

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

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

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

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

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

Kindle Paperwhite使用感受

这次购买正好赶上了国行版本发布,一并发布的还有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文件为最新,保证版本统一。

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

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

Markdown 渲染引擎

最近在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 原生支持 kramdownmarukurdiscountredcarpet 等 Markdwon 渲染引擎

感谢:

Lumia 920 代开箱

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

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

lumia920-1 lumia920-1

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