• 专注于网站建设,网络推广,关键词优化,SEO优化,专业的网站建设开发团队!

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

2015-06-11 20:06:32   来源:叶景网络

手机端的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. 一个图理解这些间距问题:

手机前端

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。

叶景网络,网络推广,网站建设
特别推荐RECOMMEND
搜索引擎网站关键词seo优化的意义
视频推广怎么做
网站seo优化怎么做关键词排上首页?
SEO介绍什么叫搜索引擎网站关键词优化
seo优化怎样做提升关键词排名
热点图文Hot
QQ客服不加好友直接打开聊天窗口 QQ客服不加好友直接
网页手机wap2.0网页布局 页面尺寸设置 网页手机wap2.0网页
手机wap页面前端的一点体会 手机wap页面前端的
常用的文本符号以及非主流符号大全 常用的文本符号以及
关注排行RANKING
1

QQ客服不加好友直接打开聊天窗口

QQ客服不加好友直接打开聊天窗口 叶景网络(www cngxit com),致力于互联网品牌建设与网络营销,专业领域包括网...

2

网页手机wap2.0网页布局 页面尺寸设置

网页手机wap2.0网页布局 页面尺寸设置 网页手机wap2 0网页的head里加入下面这条元标签,在iPhone的浏览器中页面将以...

3

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

手机wap页面前端的一点体会 手机端的html页面就像回到了最早的纯文本时代~~ 没有JS,只有单纯的div+css~容易上手,...

4

常用的文本符号以及非主流符号大全

常用的文本符号以及非主流符号大全 在word文档工具栏的符号那里提供了许多文本符号,但我还是觉得不够用,于是我从网上搜寻...

5

input /button链接的几种方法

input /button链接的几种方法 叶景网络(www cngxit com),致力于互联网品牌建设与网络营销,专业领域包括网...

6

用JavaScript怎么实现页面跳转

用JavaScript怎么实现页面跳转 叶景网络(www cngxit com),致力于互联网品牌建设与网络营销,专业领域包括网...

7

从GB2312(UTF-8)页面获取表单转换...

从GB2312(UTF-8)页面获取表单转换成UTF-8(GB2312) 由于我的网站编码是GB2312,而另一个网站(不是我的)编码却是UTF-8, ...

8

收藏本站和设为主页代码

收藏本站和设为主页代码 叶景网络(www cngxit com),致力于互联网品牌建设与网络营销,专业领域包括网...

9

textarea 滚动条属性设置

textarea 滚动条属性设置 叶景网络(www cngxit com),致力于互联网品牌建设与网络营销,专业领域包括网...