仿苏宁移动web页面自适应 rem&less

目录结构

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title>Title</title>
    <link rel="stylesheet" href="lib/font-awesome/css/font-awesome.min.css">
    <link rel="stylesheet" type="text/less" href="less/index.less">
    <script src="lib/less/less.min.js"></script>
</head>
<body>
<!--版心-->
<div class="sn_container">
    <!--顶部通栏-->
    <header class="sn_topBar">
        <a href="#" class="icon_category"></a>
        <form action="#">
            <span class="icon_search"></span>
            <input type="search" placeholder="60寸电视免费拿">
        </form>
        <a href="#" class="icon_cart"></a>
    </header>
    <!--轮播图-->
    <div class="sn_banner">
        <ul>
            <li><a href="#"><img src="images/banner08.jpg" alt=""></a></li>
            <li><a href="#"><img src="images/banner01.jpg" alt=""></a></li>
            <li><a href="#"><img src="images/banner02.jpg" alt=""></a></li>
            <li><a href="#"><img src="images/banner03.jpg" alt=""></a></li>
            <li><a href="#"><img src="images/banner04.jpg" alt=""></a></li>
            <li><a href="#"><img src="images/banner05.jpg" alt=""></a></li>
            <li><a href="#"><img src="images/banner06.jpg" alt=""></a></li>
            <li><a href="#"><img src="images/banner07.jpg" alt=""></a></li>
            <li><a href="#"><img src="images/banner08.jpg" alt=""></a></li>
            <li><a href="#"><img src="images/banner01.jpg" alt=""></a></li>
        </ul>
        <ul>
            <li class="now"></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>
    <!--分类-->
    <nav class="sn_nav">
        <ul class="clearFix">
            <li><a href="#"><img src="images/nav01.png" alt=""><p>分类</p></a></li>
            <li><a href="#"><img src="images/nav02.png" alt=""><p>分类</p></a></li>
            <li><a href="#"><img src="images/nav03.png" alt=""><p>分类</p></a></li>
            <li><a href="#"><img src="images/nav04.png" alt=""><p>分类</p></a></li>
            <li><a href="#"><img src="images/nav05.png" alt=""><p>分类</p></a></li>
            <li><a href="#"><img src="images/nav01.png" alt=""><p>分类</p></a></li>
            <li><a href="#"><img src="images/nav02.png" alt=""><p>分类</p></a></li>
            <li><a href="#"><img src="images/nav03.png" alt=""><p>分类</p></a></li>
            <li><a href="#"><img src="images/nav04.png" alt=""><p>分类</p></a></li>
            <li><a href="#"><img src="images/nav05.png" alt=""><p>分类</p></a></li>
        </ul>
    </nav>
    <!--页签-->
    <footer class="sn_tabs">
        <ul>
            <li><a href="#"><span class="fa fa-home"></span><p>首页</p></a></li>
            <li><a href="#"><span class="fa fa-reorder"></span><p>分类</p></a></li>
            <li><a href="#"><span class="fa fa-file-text-o"></span><p>必抢清单</p></a></li>
            <li><a href="#"><span class="fa fa-user"></span><p>我的易购</p></a></li>
            <li><a href="#"><span class="fa fa-suitcase"></span><p>新手大礼包</p></a></li>
        </ul>
    </footer>
</div>
<script src="lib/zepto/zepto.min.js"></script>
<!--扩展选择器-->
<script src="lib/zepto/selector.js"></script>
<!--做动画-->
<script src="lib/zepto/fx.js"></script>
<!--手势-->
<script src="lib/zepto/touch.js"></script>
<script src="js/index.js"></script>
</body>
</html>

js/index.js

$(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();
    });

});

less/index.less

//变量
@import "var";
//混入
@import "mixins";
//适配
@import "adapter";
//重置样式
@import "reset";
//模块
@import "topBar";
@import "banner";
@import "nav";
@import "tabs";

less/var.less

@charset "UTF-8";
//变量
//rem适配方案不好维护  设备会更新  设计稿尺寸  预设基准值
//适配主流设备十几种
@adapterDeviceList:750px,720px,640px,540px,480px,424px,414px,400px,384px,375px,360px,320px;
//设计稿尺寸
@psdWidth:750px;
//预设基准值
@baseFontSize:100px;
//设备的种类
@len:length(@adapterDeviceList);
//主体颜色
@snColor:#fabc09;

less/mixins.less

//遍历使用的是for循环
//less没有循环语法
//使用函数的迭代 死循环
//根据数组的长度去停止当前循环
//给函数的执行附加条件
//需要序号来判断  通过序号遍历 @index 1 开始
//遍历成功
.adapterMixin(@index) when ( @index > 0){
  @media (min- extract(@adapterDeviceList,@index)){
    html{
      font-size: @baseFontSize / @psdWidth * extract(@adapterDeviceList,@index);
    }
  }
  .adapterMixin( @index - 1);
}

less/adapter

.adapterMixin(@len);

less/reset.less

*,
*::before,
*::after{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  tap-highlight-color: transparent;
  -webkit-tap-highlight-color: transparent;
}
body{
  font-size: 14px;
  font-family: "Microsoft YaHei",sans-serif;
  color: #333;
}
ul,ol{
  list-style: none;
}
a{
  text-decoration: none;
  color: #333;
}
input,textarea{
  border: none;
  outline: none;
  resize: none;
  -webkit-appearance: none;
}
.f_left{
  float: left;
}
.f_right{
  float: right;
}
.clearFix::before,
.clearFix::after{
  content: "";
  display: block;
  visibility: hidden;
  height: 0;
  line-height: 0;
  clear: both;
}
.m_l10{
  margin-left:10px;
}
.m_r10{
  margin-right:10px;
}
.m_t10{
  margin-top:10px;
}
.m_b10{
  margin-bottom:10px;
}
/*版心*/
.sn_container{
  position: relative;
   100%;
  max- 750px;
  min- 320px;
  margin: 0 auto;
  padding-top: 90rem/@baseFontSize;
  padding-bottom: 100rem/@baseFontSize;
}

less/topBar.less

.sn_topBar{
   100%;
  height: 90rem/@baseFontSize;
  background: @snColor;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 999;
  a{
    position: absolute;
    top: 0;
     90rem/@baseFontSize;
    height: 90rem/@baseFontSize;
    &.icon_category{
      left: 0;
      background: url("../images/icon_category.png") no-repeat center / 44rem/@baseFontSize 70rem/@baseFontSize;
    }
    &.icon_cart{
      right: 0;
      background: url("../images/icon_cart.png") no-repeat center / 63rem/@baseFontSize 68rem/@baseFontSize;
    }
  }
  form{
     100%;
    padding: 0 90rem/@baseFontSize;
    position: relative;
    .icon_search{
       30rem/@baseFontSize;
      height: 30rem/@baseFontSize;
      position: absolute;
      left: 100rem/@baseFontSize;
      top: 30rem/@baseFontSize;
      background: url("../images/icon_search.png") no-repeat center / 27rem/@baseFontSize 28rem/@baseFontSize;
    }
    input{
       100%;
      height: 60rem/@baseFontSize;
      margin-top: 15rem/@baseFontSize;
      border-radius: 5rem/@baseFontSize;
      background: rgba(255,255,255,0.3);
      font-size: 24rem/@baseFontSize;
      padding-left:50rem/@baseFontSize;
    }
  }
}

less/banner.less

.sn_banner{
   100%;
  overflow: hidden;
  position: relative;
  ul{
    &:first-child{
       100%*10;
      transform: translateX(-100%/10);
      -webkit-transform: translateX(-100%/10);
      li{
         100%/10;
        float: left;
        a{
          display: block;
           100%;
          img{
            display: block;
             100%;
          }
        }
      }
    }
    &:last-child{
      position: absolute;
      right: 20rem/@baseFontSize;
      bottom: 20rem/@baseFontSize;
      li{
        margin-left: 12rem/@baseFontSize;
         12rem/@baseFontSize;
        height: 12rem/@baseFontSize;
        border-radius: 50%;
        float: left;
        background: #fff;
        &.now{
          background: @snColor;
        }
      }
    }
  }
}

less/nav.less

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

less/tabs.less

.sn_tabs{
   100%;
  height: 100rem/@baseFontSize;
  position: fixed;
  bottom: 0;
  left: 0;
  background: #fff;
  border-top: 1px solid #ccc;
  ul{
     100%;
    li{
       20%;
      float: left;
      padding-top: 10rem/@baseFontSize;
      a{
        display: block;
         100%;
        text-align: center;
        span{
          font-size: 40rem/@baseFontSize;
        }
        p{
          padding-top: 5rem/@baseFontSize;
          font-size: 20rem/@baseFontSize;
          color: #666;
        }
      }
    }
  }
}

仿苏宁移动web页面 自适应 rem&less

仿苏宁移动web页面自适应 rem&less