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

手机前端的一些事一些情

2011年09月02日

手机前端的一些事一些情

随着ios系统和android系统的普及,慢慢地手头上的项目都向手机端扩展开来了,下面介绍一下 android 手机端前端开发不得不说的事儿:

文档类型定义(DTD (Document Type Definition))

手机专有文档类型定义

<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
...

使用可变长度单位

百分比(%) & 相对字符长度(em)

  • 百分比

    使用百分比做宽度可以使页面在不同的尺寸都可以等比例缩放

  • 相对字符长度(em)

    使用em做宽度可以使页面可以根据字符的大小进行缩放

    例如:在480宽度的使用的默认字体大小是24px;而在360宽度下18px,就可以进行以控制字体的大小来控制页面在不同尺寸下的等比例缩放

CSS3媒体查询

CSS3媒体查询可以识别设备在宽高,从而进行特殊属性定义

以下是 CSS3媒体查询 代码

/* CSS Document */
@media screen and (device-width:360px){body { font-size:18px;}}

CSS3背景定义

使用CSS3:background-size属性可以令背景高度可自定义。尽可能不使用CSS sprites技术,减少用户加载不必要的图片,消耗不必要的流量。

CSS3:background-size 代码如下:

/* CSS Document */
-webkit-background-size:100% auto;background-size:100% auto;

善用CSS3选择器

善用CSS3选择器,减少Class的数量。

选择符类型 表达式 描述
子串匹配的属性选择符 E[att^="val"] 匹配具有att属性、且值以val开头的E元素
子串匹配的属性选择符 E[att$="val"] 匹配具有att属性、且值以val结尾的E元素
子串匹配的属性选择符 E[att*="val"] 匹配具有att属性、且值中含有val的E元素
结构性伪类 E:root 匹配文档的根元素。在HTML中,根元素永远是HTML
结构性伪类 E:nth-child(n) 匹配父元素中的第n个子元素E
结构性伪类 E:nth-last-child(n) 匹配父元素中的倒数第n个结构子元素E
结构性伪类 E:nth-of-type(n) 匹配同类型中的第n个同级兄弟元素E
结构性伪类 E:nth-last-of-type(n) 匹配同类型中的倒数第n个同级兄弟元素E
结构性伪类 E:last-child 匹配父元素中最后一个E元素
结构性伪类 E:first-of-type 匹配同级兄弟元素中的第一个E元素
结构性伪类 E:only-child 匹配属于父元素中唯一子元素的E
结构性伪类 E:only-of-type 匹配属于同类型中唯一兄弟元素的E
结构性伪类 E:empty 匹配没有任何子元素(包括text节点)的元素E
目标伪类 E:target 匹配相关URL指向的E元素
UI元素状态伪类 E:enabled 匹配所有用户界面(form表单)中处于可用状态的E元素
UI元素状态伪类 E:disabled 匹配所有用户界面(form表单)中处于不可用状态的E元素
UI元素状态伪类 E:checked 匹配所有用户界面(form表单)中处于选中状态的元素E
UI元素状态伪类 E::selection 匹配E元素中被用户选中或处于高亮状态的部分
否定伪类 E:not(s) 匹配所有不匹配简单选择符s的元素E
通用兄弟元素选择器 E ~ F 匹配E元素之后的F元素

减少图片的使用

尽量使用CSS3技术实现美化效果。例如圆角,渐变,投影等

圆角CSS3:border-radius

/* CSS Document */
-webkit-border-radius:0.2em;border-radius:0.2em;

渐变CSS3:gradient

/* CSS Document */
background:#45a40e;background:-webkit-gradient(linear,0 0,0 100%,from(#62c149),to(#45a40e)); background:-moz-linear-gradient(top,#62c149,#45a40e);

阴影 CSS3:box-shadow

/* CSS Document */
-webkit-box-shadow:0 -3px 8px rgba(0,0,0,0.3);box-shadow:0 -3px 8px rgba(0,0,0,0.3);

分类手机前端
标签
阅读 2,303
  • 评论加载中...

标签云

分类目录

最新留言

  • 评论加载中...

与我联系

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

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