欢迎来到 jackNEss'窝窝
I like simple mind

手机前端开发经验分享——android、ios篇(CSS部分)

2012年07月03日

手机前端开发经验分享——android、ios篇(CSS部分)

针对高端智能手机开发的站点,其实用的是各种HTML5的技术,我在这里给大家分享一下在手机上前端开发中要注意的地方细节。

下面与大家分享下CSS部分的一些经验。

CSS部分

CSS部分在手机项目中可以说是春天来了遍地花开,各种CSS3特效属性用得各种爽,各种动画特效的运用甚至可以了摆脱对JS的依赖了。下面介绍下我在手机项目中用到的css3属性。

gradient

渐变属性,这个在支持CSS3的浏览器上用已经是广泛应用的了,可以为我们网站免去不少的图片加载、http请求。

在我本次手机项目中用到渐变的地方比较多,下面我就以导航部分为例说明下:

/* css document*/
.t56_menu{ 
	background:-webkit-gradient(linear,0 0,0 100%,from(#fefefe),to(#cdcdcd));
	background:-moz-linear-gradient(top,#fefefe,#cdcdcd);
	background:-o-linear-gradient(top,#fefefe,#cdcdcd);
}

border-radius

圆角属性,相信接触过CSS3 的童鞋并不陌生。

下面我以导航中标识当前位置的UI效果为例:

/* css document*/
.t56_menu a{ 
	border-radius:0.3em;
}

transition、animation

动画过度,让展开收缩,平移,将原先如果要用js需要写几百行的代码实现改为css3中的一个属性,由浏览器自行进行渲染

在项目中用到动画效果的部分一般有 展开收缩,箭头方向转变。

/* css document*/
.t56_point_bm_icon{ 
	-webkit-transition:0.3s;
	-moz-transition:0.3s;
	-o-transition:0.3s;
	transition:0.3s;
}
/* css document */
.uvula{
	-moz-animation: uvula 0.1s 2s infinite linear normal none;
	-webkit-animation: uvula 0.1s 2s infinite linear normal none;
}

想进一步了解可以查看这里 http://www.w3schools.com/css3/css3_animations.asp

box-shadow

阴影属性,UI设计师最喜欢用的属性之一,能做出 内阴影 与外阴影 2 种效果。

外阴影

项目中用到外阴影的地方一般是大模块的边缘部分

/* css document */
.t56_module03{
	-webkit-box-shadow:0 2pt 2pt #666;
	-moz-box-shadow:0 2pt 2pt #666;
	box-shadow:0 2pt 2pt #666;
}

内阴影

项目中用到内阴影的地方一般是输入框部分

/* css document */
.t56_module03{
	-webkit-box-shadow:0 2pt 2pt #ccc inset;
	-moz-box-shadow:0 2pt 2pt #ccc inset;
	box-shadow:0 2pt 2pt #ccc inset;
}

text-shadow

文字阴影,UI设计师最喜欢用的属性之一,也是我们最喜欢选择无视的属性,现在终于可以通过 CSS3 大胆地用上了。

本项目中用到的 text-shadow主要用在模拟iphone前进后退部分 menu上的 文字阴影部分。

/* css document */
-moz-text-shadow: 0 1px 1px #fff;
text-shadow: 0 1px 1px #fff;

transform

在 CSS3 中,可以利用 transform功能实现文字或图像的旋转、缩放、倾斜、移动这4种类型的变形处理。

在本次项目中一般用于元素旋转变形,以增加图片的使用率,减少图片数目。

/* css document */
.t56_toggle_icon .t56_point_icon{
	-webkit-transform: rotate(90deg);
	-moz-transform: rotate(90deg);
	-o-transform: rotate(90deg);
	transform: rotate(90deg);
}

关于transform更多的用法可以参考这里 http://www.w3schools.com/cssref/css3_pr_transform.asp

background-size

background-size 可以将背景图片按比例进行拉伸。

与 transfom 的目的一致,使用 background-size的目的是为了增加图片的使用率,减少图片数目。

/* css document */
.t56_point{
	-webkit-background-size:100% 100%;
	-moz-background-size:100% 100%;
	background-size:100% 100%;
}

关于 background-size 更多的用法可以参考这里 http://www.w3schools.com/cssref/css3_pr_background-size.asp

max-width

max-width属性,虽然是 CSS2属性,但是在手机项目上却是用得比较广泛的属性。
例如我接到的 56网触摸版项目,产品部定出了 UI设计的3个分辨率节点 分别是 640分辨率,480分辨率,320分辨率,那么我们就可以给 body 或者是 .wrap 设置一个 max-width属性,让大于这个分辨率的屏幕浏览本网页是也拥有良好的视觉效果。

不过设置 max-width过后 在js获取 offsetWidth 的时候有一个 bug,使 js获取到的是 当前浏览器的大小,而不是max-width数值的大小,目前我研究到的解决方法是,max-width 必须写在 width的前面。

/* css document */
.t56_wrap {
	max-width:640px;
}

选择器

在不必考虑蹩脚的 IE 浏览器的手机项目,我们可以尽情地使用 CSS给我们提供的 选择器来 重构我们的站点。

  • 属性选择符 E[attr^="val"],E[attr$="val"]
  • 关系选择符 E~F
  • 伪类选择符 E:not(),E:last-child,E:nth-child(n)

就我个人而言,用得最多的就是 E:last-child,E-nth-child(n) 属性了。

给大家的一点 个人 tips

在这里,我就个人说一下重构手机站点用到的一些方法

习惯用 %、em 作为长度单位

用 % 作为单位能让我们的模板更具有通用性,保持视觉的一致性。
常用于框架,列表布局。

用 em 作为单位同样地能让我们的模板更具有通用性,保持视觉的一致性。
常用于 文字间隙,按钮,模块之间间隔。

给我们手机站点加一个 max-width

我们手机站点设计师给的ui基本都是有一个limit值的,他们的 psd源文件 都是有一个边界的。

超过这个边界的话其实,即使我们是做了自适应布局,让他不至于变形,其实得到的效果也是不尽理想的。我觉得就是除非设计师的ui里面包含一个自适应布局时候的ui在里面,否则我们是应该给 我们的 手机站点 设定一个 max-width 属性的。

大分辨率的左右布局在小分辨率下可考虑改用上下布局

在设计师给过来的ui设计稿中 不乏会出现一行 2个按钮,并且所占宽度为 50% 50%的UI设计,一旦这些按钮里面的文字内容较多的时候,去到小屏幕手机那里是很有可能让一个按钮中的文字变成 2 行的样子,然后让2个文字超多的按钮还一左一右的并排着显示。

这样其实看起来..很丑!在设计师没提供解决方案的时候,我们不妨向他提议在小分辨率下采用上下顺排的形式进行布局显示,这样在下分辨率下我们按钮就有更大的空间去堆放文字,不至于变形变丑了。

CSS3特效别用得太多

特效用太多,cpu跟不上的手机会..卡机,所以,大家懂的,适可而止,还有就是…特效越多,用户的手机就越费电,像我们这么为用户着想的前端,还是点到即止好了。 ^_^#

分类HTML + CSS
阅读 913
  • 评论加载中...

标签云

分类目录

最新留言

  • 评论加载中...

与我联系

如有疑问or建议可通过以下方式跟我取得联系.

Q Q:373435871
Email:jackness1208@gmail.com
© Copyright 2011 - 2014 jackNEss.org All Rights Reserved 粤ICP备14065612号
首页 | 关于我 | 网站地图 | RSS