Change Dir

先知cd——热爱生活是一切艺术的开始

统计

留言簿(18)

积分与排名

“牛”们的博客

各个公司技术

我的链接

淘宝技术

阅读排行榜

评论排行榜

手机wap页面前端的一点体会

手机端的html页面就像回到了最早的纯文本时代~~

没有JS,只有单纯的div+css~容易上手,但是也有很多限制。不在技术上,更多的是一些适合手机屏幕的适配~

移动平台有多种,iOS, Android, WP7, Sybian …

移动浏览器就更多,我的Android手机中装了10款浏览器,分别是:原生google的,qq,UC,海豚,firefox,opera,天天,go,skyfire和x浏览器GL。

那么我们需要的适配多少呢?答案是 平台数去乘以平台版本号再乘以浏览器种类再乘以浏览器版本号~~无穷无尽啊

一些建议:仅限中低端适配

1. 尽量采用div+css结构,因为有些浏览器在有些平台上的显示是不支持table的。

2. css不要用float,不要用过多的伪类和absolute之类的position相关的东西。

3. form表单不要使用type为file的input。

4. 每行设计的时候最好数数pixel的个数(很容易计算的)

5. 被迫使用表格的话,那么请记住不要用rowspan或是colspan,部分android和sybian系统不支持。

6. 看一些已有的大型站点的手机wap站前端,去学习他们的标签设计,毕竟小团队或者个人开发资源有限,无法统计和适配多种手机。

7. 别搞wap啦,做好webapp和native,改行html5 + css3吧~~

另外对于触摸屏的出现,在head中的meta多了很多的设定,比如viewport等。

下面贴一些html和css的小tip,希望有用。

1. 浏览器是忽视所有文档中的tab,回车和空格的。

2. ..在<a>的路径中代表上级目录

3. 所有的路径分隔符都是/

4. Block型元素前后都有换行,inline型元素则没有,block型有<h1-h6>,<p>, <blockquote>,inline型有<a>,<em>,<img>,<q>等

5. Css的最近原则就是如果有多条css属性匹配,那么按顺序执行渲染,所有的conflict都被最后的规则解决。

6. Css的字体大小font-size指的是字体的高度,就是从最下端到最上端的距离。如果单位不是px而是%,那么指的是相比其他字体的大小倍数。如果父标签是10px,那么子标签应用了%或者em的就是父标签的倍数关系。

7. Line-height其实是行间距

8. Html中每个元素可以被理解为一个box,而padding就是指元素内容与box的边界之间的内间距。

9. 一个图理解这些间距问题:

clip_image001

10. Id属性是用来定义严格的单一元素的。你可以有很多个元素有相同的class属性,但是id只能有一个。

11. Width属性只声明内容区域的宽度。Width的默认是auto。

12. 默认的padding是0px

13. 用空格分开的css表示的是父子关系,比如div h2{}就表示div下的h2如何如何。这种父子关系是相对的,不是直接关系,只要h2嵌套在div中就可以。直接的父子关系需要div > h2{}来指定。

14. Padding和margin的省略写法:padding: a b c d是按照上右下左的顺时针顺序设定的。

15. Css优先级使用三位数排列法:000,是否有id,有则在第一位加1,是否有class或者伪类,有则在第二个数加类或伪类的个数,是否有元素名,有则在第三位加元素数。

16. 在flow中需要注意的一点是:水平的两个元素的margin是二者之和,而垂直的情况则是二者中大的margin作为间隔。换句话说,inline元素之间的margin是二者之和,而block元素之间的margin是二者中的较大者。

17. Float会将元素剥离出页面的flow,页面其他block元素会在它之下,但是inline元素会自动和float元素的边界分离。

18. 表格单元格之间的距离叫做border-spacing。

posted on 2011-06-07 09:03 changedi 阅读(19173) 评论(1)  编辑  收藏 所属分类: 杂谈

评论

# re: 手机wap页面前端的一点体会 2011-12-03 21:02 deeper

不错。我也在项目体会到这些  回复  更多评论   


只有注册用户登录后才能发表评论。


网站导航: