您的位置：首页 > 移动开发

关于重构手机APP页面的若干技术问题

2013-10-02 12:36 549 查看

最近在做安卓客户端的APP界面开发，总结一些经验如下：

1、要保证页面在手机中正常显示，需要在<head>标签内添加如下语句：

<meta name="viewport" content="width=480, target-densitydpi=high-dpi, user-scalable=no" />

2、一些css中需要注意的设置：

html{height:100%;}

body{min-height:100%;position:relative;}

3、表单元素在手机中点击时会出现边框，取消边框的写法如下：

input, textarea, button, a{-webkit-tap-highlight-color:rgba(0,0,0,0);}

4、背景图片background中，0 0 位置值是默认值，可以省略不写；repeat双方向重复也是默认值，也可以不写；位置值中的“bottom”、“right”可以使用“100%”来替代，以此减少代码量。如下：

div{background:url(pic.png) 0 0 repeat;}简写为div{background:url(pic.png);}

5、box-sizing:border-box时，表示width值包含了border和padding的值。默认是不包含的。

6、border-radius设置圆角，可依次设置四个方向的圆角大小，顺序从左上角按顺时针旋转。如：

.class{border-radius:0 0 5px 5px}设置的是一个上边直角，下边5像素圆角的元素。

7、在手机中的颜色渐变写法：（只考虑webkit）

background-image:-webkit-gradient(linear,0 0,0 100%,from(#f3b787),to(#e39e61));

background-image:-webkit-linear-gradient(top,#f3b787,#e39e61);

8、内外阴影同时存在的写法：

-webkit-box-shadow:1px 1px 1px #FFF inset，1px 1px 2px #ded5ba;

注意：内外阴影同属于同一个css属性（box-shadow），因此要写在同一句box-shadow里面，值用逗号分隔。内阴影是inset，外阴影为默认，不需要写outset，写了outset反而不起作用了。

9、双层边框的写法，可以使用内阴影来实现。有些按钮除了有外边框线之外，还会在边框线内有一条1px大小的较亮的边框线来提升按钮视觉感受。此时要实现这条亮框线，就可以使用内阴影来实现，具体写法如下：

-webkit-box-shadow:1px 1px 1px #FFF inset, -1px -1px 1px #FFF inset;

值分别表示：水平方向位移、竖直方向位移、阴影大小、阴影颜色、内阴影。

要实现四个方向的内阴影，就要写两个值，一个是实现右下，一个实现左上。

10、按钮被按下的瞬间的状态效果，使用 .btn:active{...}的写法。但目前在手机上不支持该效果。解决方案尚未找到。。。

11、对话气泡的写法：一个气泡写成一个单独的HTML文件，气泡的上下边框和背景都需要图片样式来实现的时候，可以考虑对<html>写样式，将其中一部分图片样式写到<html>中，另一些样式写在<body>中，最后一些样式写在<div>中，这样可以减少div的嵌套层数。

12、手机页面中的文字大小使用pt作为单位：.class{font-size:18pt;}具体大小需要用手机测试来确定最终效果。

13、为了减少http响应，要尽量使用CSS Sprites。但不是所有图片都可以拼合进去。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航