移动端开发---rem-less适配总结

移动端开发---rem-less适配总结

1. 使用fixed布局会脱离文档流，可以设置padding显示其他的元素。

2.使用less设置样式的嵌套案例：

ul{ &:first-child{
      width: 100%*10;
      transform: translateX(-100%/10);
      -webkit-transform: translateX(-100%/10);
      li{
        width: 100%/10;
        float: left;
        a{
          display: block;
          width: 100%;
          img{
            display: block;
            width: 100%;
          }
        }
      }
    }

3.使用rem适配就不用二倍图的设置了，rem是针对内容的设置。

如下例子中，背景位置直接使用换算公式以rem为单位，不用px。当设计稿尺寸重定义之后，只需要将@baseFontSize 重新设置为：新设计稿尺寸/原设计稿尺寸*原@baseFontSize即可

&.icon_category{      
        left: 0;
      background: url("../images/icon_category.png") no-repeat center / 44rem/@baseFontSize 70rem/@baseFontSize;
    }

4.使用定位实现块级元素居中，left：50%，margin-left：-元素宽度的一半。（适合宽度有具体值的元素）

5.zepto.js 与jQuery类似，查官网看属性即可。比如下面的使用例子实现轮播图（查找子元素、on绑定函数、设置css样式等）：

$(function () {
/*手势切换轮播图*/
    /*1.自动轮播 无缝*/
    /*2.点随着变化*/
    /*3.完成手势切换*/

    var $banner = $('.sn_banner');
    var width = $banner.width();

    var $imageBox = $banner.find('ul:first');
    var $pointBox = $banner.find('ul:last');
    var $points = $pointBox.find('li');

    var animationFuc = function () {
        /*动画*/
        $imageBox.animate({transform:'translateX('+(-index*width)+'px)'},200,function () {
            /*动画执行完成的回调*/
            if(index >= 9){
                index = 1;
                /*瞬间*/
                $imageBox.css({transform:'translateX('+(-index*width)+'px)'});
            }else if(index <= 0 ){
                index = 8;
                /*瞬间*/
                $imageBox.css({transform:'translateX('+(-index*width)+'px)'});
            }
            /*index  1-8*/
            /*2.点随着变化*/
            $points.removeClass('now').eq(index-1).addClass('now');

        });
    }

    /*1.自动轮播 无缝*/
    var index = 1;
    var timer = setInterval(function () {
        index ++;
        animationFuc();
    },5000);

    /*3.完成手势切换  android 4.0 兼容 */
    /*左滑的手势  下一张*/
    $banner.on('swipeLeft',function () {
        index ++;
        animationFuc();
    });
    /*右滑的手势  上一张*/
    $banner.on('swipeRight',function () {
        index --;
        animationFuc();
    });

});

6.margin:0 auto 能实现块级元素的居中。img 不可设置宽度100%。

7.使用ul-->li-->a-->img-->p结构实现多个导航图标。根据一行想要显示的li个数设置li的宽度百分比。

如：

.sn_nav{
width: 100%;
  padding: 10rem/@baseFontSize;
  ul{
    width: 100%;
    li{
      width: 20%;
      float: left;
      a{
        display: block;
        width: 100%;
        img{
          display: block;
          width: 80rem/@baseFontSize;
          height: 80rem/@baseFontSize;
          margin: 0 auto;
        }
        p{
          text-align: center;
          font-size: 20rem/@baseFontSize;
          padding: 5rem/@baseFontSize;
          color: #666;
        }
      }
    }
  }
}