移动端开发的一些技巧

2016-7-17 12:25 2050 0

摘要: 开篇语最近接手了一个移动端的项目。个人感觉是自己做得比较快而且比较健壮的一个。。。移动端最主要就是页面要适用不同的手机屏幕，ipad等。下面就分享一些技巧,让你不依赖任何框架高效地搭建自己的项目。一、样式 ...

开篇语

最近接手了一个移动端的项目。个人感觉是自己做得比较快而且比较健壮的一个。。。移动端最主要就是页面要适用不同的手机屏幕，ipad等。下面就分享一些技巧,让你不依赖任何框架高效地搭建自己的项目。

一、样式按组件或板块分文件写再合成

①设置各种变量

采用scss或者less来写css代码有很多好处。这里就不详细说。

我们拿到设计图的第一步，就是要分析各个页面之间有哪些模块、哪些样式、哪些颜色是一样的。一般情况下，为了各个页面的风格统一，各个页面上的主颜色应该都是一致的，而且好些页面都会用到一些相同的组件，例如slider。所以，我们首先可以定义一个常量文件，里面就专门存放颜色、高度、宽度等变量。定义一个公共样式文件，例如写一些各个页面都有可能用到的清楚浮动等样式。

个人感觉scss比less更好用一点，用scss定义的话，其中有一个方法是%定义法，就是定义了并不会被编译，而是实际上用到的时候才会被编译。例子图：

②按模块细分

个人感觉，按模块等细分之后，代码的可读性能够明显地提高，方便维护，而且引入页面的文件个数也减少了，还可以提高性能呢。不过，这里要注意，子模块的文件名要以“_”开始哦，这样就不会被编译，而是需要引用的时候再编译哦。例子如图：

二、页面适应性布局

个人认为，适配移动端比较好的布局方式是百分比+rem布局。

百分比的优势在于，同一个百分比的真实尺寸会跟随屏幕大小变化。举个例子，像这种：

红色框那里，假设现在的要求是一行4个板块，适应任何屏幕。那么，用ul,li写html，然后布局的话，如果写定ul的宽度是100%，然后li的宽度是25%，再设置box-sizing:border-box的话。各种屏幕下，这四块都是平分并且不会出现横向滚动条的。不过要注意，这个时候的间距就不要用margin-left和margin-right来撑开，而是用padding来撑开。就是像这样比例明显，板块区分度高的情况适合用百分比来布局。

代码如下：

CSS
1
2
3
4
5
6
7
8
ul{
    width:100%;
    margin-bottom:10px;
｝
ul li{
    width:25%;
    box-sizing:border-box;
｝

为什么要设置box-sizing:border-box;呢？不明白的话，可以看这里：http://www.w3school.com.cn/cssref/pr_box-sizing.asp。

rem的话，rem的取值是只。相对于根元素htm的font-size，即只需要设置根元素的font-size，其它元素使用rem单位设置成相应的百分比即可。你再用@media写一下不同尺寸下跟元素html的font-size的值即可。然后神奇的事情就发生了。当你改变尺寸时，字体。图片等，就会自动跟着适应了。用起来真的很爽！

一些常用的适应尺寸如下:

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
@charset "utf-8";
 
@media only screen and (max-width: 315px){
  html {
    font-size: 50% !important;
  }
}
@media only screen and (min-width: 316px){
  html {
    font-size: 62.5% !important;
  }
}
@media only screen and (min-width: 640px){
  html {
    font-size: 125% !important;

                      声明：文章版权归原作者所有 部分文章转自互联网 如有侵权请联系 
                      [邮箱地址] 删除
                    



1

路过




雷人




握手




鲜花




鸡蛋


刚表态过的朋友 (1 人)

匿名


收藏
分享
邀请

上一篇：Mac 中 Git 命令自动补全下一篇：线程安全与共享资源

移动端开发的一些技巧

刚表态过的朋友 (1 人)

最新评论

相关分类