列举几个,手机前端中应该注意哪些问题?

这些天,做了app中一个分类,八九个页面,还算比较简单,有些页面我重写了好几遍,为的就是能更好的,用更短的代码,去实现前端视觉效果。

全局通用css样式

这些样式,一般做页面时候,首先要考虑进来的。

1
2
3
4
html { width: 100%; height:auto;;}
body { width: 100%; margin: 0 auto; height:auto; background-color: #F9F9F9;}
ul, ol, li { list-style: none;}
a { text-decoration: none; color: #000; }

手机端,宽度一定要自适应,不然,由于国内手机的屏幕大小不一,显示的效果也都不一样,如果不是自适应的话,那么做出来的效果,可就 真的惨不忍睹了。

固定到顶部,底部。

不管用户怎么滑屏,顶部的状态栏,永远都显示在顶部。这句代码是什么呢?

1
2
. nav { position:fixed; top:0px; }
.footer { position:fixed; bottom:0px; }

就是这样简单,你可以尝试一下。

ul li 标签的应用。

如何把li横排,只需一个代码就实现,如下:
我也是第一次发现这个语法,特地分享过来,供大家使用。

1
2
.msg ul{  display: -webkit-box; }
.msg li{ font-size: 2.2em; line-height: 88px;  }

渐变语法

之前,我几乎用图片来实现类似的效果,这一次,我不想再次用这样的笨办法了,能不能用css直接实现渐变效果呢?
这样,可以节省一些空间呢。

1
background-image: linear-gradient(90deg, #f77865 0%, #f56158 100%); 

百试百灵。

百分比不能滥用

在重写页面的时候,期间我用了好多百分比,结果到底后来的页面那么个不兼容,甚至导致一些语法效果失灵,于是,只好重头再来,老老实实的用具体数字,来定位。
这是一个很庞大的工作量,需要一定的耐心才能完成。
我也终于明白,一个浮躁的人,是不可能成为程序员的,否则,写出来的代码,到处都是bug。

好了,暂时分享到这里吧,之后还有一些更专业的文章,会分享于此。
谢谢。

这算是我第一次独立的完成一个简单的项目,学到了很多知识,巩固了自己的css基础,前端之路还有很长,需要我一步一步的走下去。

加油吧~成为一位真正的前端设计师而努力!

2017-08-20 09:08