移动开发的一些技巧

开篇语

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

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

①设置各类变量

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

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

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

②按模块细分

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

2、页面适应性布局

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

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

 

红色框那里，假设如今的要求是一行4个板块，适应任何屏幕。那么，用ul,li写html，而后布局的话，若是写定ul的宽度是100%，而后li的宽度是25%，再设置box-sizing:border-box的话。各类屏幕下，这四块都是平分而且不会出现横向滚动条的。就是像这样比例明显，板块区分度高的状况适合用百分比来布局。

代码以下：

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的值便可。而后神奇的事情就发生了。当你改变尺寸时，字体。图片等，就会自动跟着适应了。用起来真的很爽！

一些经常使用的适应尺寸以下:

@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;
  }
}
@media only screen and (min-width: 750px){
  html {
    font-size: 150% !important;
  }
}
@media only screen and (min-width: 1242px){
  html {
    font-size: 187.5% !important;
  }
}

想了解更多，能够参考这里：http://www.cnblogs.com/beidan/p/5275379.html#3382529。

3、常见的一些效果的作法

①页面板块可横向滑动

一种就是咱们常常见的，一些特卖活动、抢购活动的时候，须要出现横向滚动状况。效果图：

不要觉得这种效果会涉及到什么touch事件，要写多复杂的js。其实只用css就能够很简单地实现了。原理就是利用overflow属性。设置其水平方向滚动，垂直方向hidden便可。

固然，还要配合一些其余的代码。

具体css代码以下：

ul.pinxiang-list{
        padding:10px;
        padding-top:0;
        padding-bottom:20px;
        width:100%;
        box-sizing:border-box;
        overflow-x:scroll;
        overflow-y:hidden;
        white-space: nowrap;
        float:left;
｝
ul.pinxiang-list li{
        position:relative;
        display:inline-block;
        margin-right:5px;
 ｝

这里最主要的就是要设置ul的宽度是100%，而且向左浮动。li要设置为display:inline-block.

还有一个就是，若是你用谷歌调试的时候，会发现，效果是这样的：

对，就是会出现一个明显的滚动条。可是若是你用真机，也就是用移动设备看的时候，你会发现其实滚动条是不会出现的。因此有时候作移动的东西，仍是须要真机测试一下比较靠谱啊。

另外要注意一个问题，因为li被display:inline-block.那么就有了inline的属性，默认。此元素会被显示为内联元素，元素先后没有换行符。而且，该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。什么意思呢，简单来讲就是这些li的对齐基线的默认方式是以最后一行的文字对齐的。看图：

由图中能够明显看出，最后一个li因为没有图片撑起来，而它们的默认方式又是以最后一行文字为基准的，因此最后一个li就“掉”了下来。这个时候，咱们就须要设置一下vertical-align这个属性的值了。设置为：vertical-align:middle。具体用法，能够看这里。这样设置了的话，就没有问题了哦。效果完成！！！

 

结语

好像也没想到还要说什么呢。先说到这里吧。。。有看不懂的能够私信给我哦！

最后，祝你们端午节快乐！