仿苏宁移动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="data:images/banner08.jpg" alt=""></a></li>

            <li><a href="#"><img src="data:images/banner01.jpg" alt=""></a></li>

            <li><a href="#"><img src="data:images/banner02.jpg" alt=""></a></li>

            <li><a href="#"><img src="data:images/banner03.jpg" alt=""></a></li>

            <li><a href="#"><img src="data:images/banner04.jpg" alt=""></a></li>

            <li><a href="#"><img src="data:images/banner05.jpg" alt=""></a></li>

            <li><a href="#"><img src="data:images/banner06.jpg" alt=""></a></li>

            <li><a href="#"><img src="data:images/banner07.jpg" alt=""></a></li>

            <li><a href="#"><img src="data:images/banner08.jpg" alt=""></a></li>

            <li><a href="#"><img src="data: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="data:images/nav01.png" alt=""><p>分类</p></a></li>

            <li><a href="#"><img src="data:images/nav02.png" alt=""><p>分类</p></a></li>

            <li><a href="#"><img src="data:images/nav03.png" alt=""><p>分类</p></a></li>

            <li><a href="#"><img src="data:images/nav04.png" alt=""><p>分类</p></a></li>

            <li><a href="#"><img src="data:images/nav05.png" alt=""><p>分类</p></a></li>

            <li><a href="#"><img src="data:images/nav01.png" alt=""><p>分类</p></a></li>

            <li><a href="#"><img src="data:images/nav02.png" alt=""><p>分类</p></a></li>

            <li><a href="#"><img src="data:images/nav03.png" alt=""><p>分类</p></a></li>

            <li><a href="#"><img src="data:images/nav04.png" alt=""><p>分类</p></a></li>

            <li><a href="#"><img src="data: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-width: 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;

  width: 100%;

  max-width: 750px;

  min-width: 320px;

  margin: 0 auto;

  padding-top: 90rem/@baseFontSize;

  padding-bottom: 100rem/@baseFontSize;

}

less/topBar.less

.sn_topBar{

  width: 100%;

  height: 90rem/@baseFontSize;

  background: @snColor;

  position: fixed;

  left: 0;

  top: 0;

  z-index: 999;

  a{

    position: absolute;

    top: 0;

    width: 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{

    width: 100%;

    padding: 0 90rem/@baseFontSize;

    position: relative;

    .icon_search{

      width: 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{

      width: 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{

  width: 100%;

  overflow: hidden;

  position: relative;

  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%;

          }

        }

      }

    }

    &:last-child{

      position: absolute;

      right: 20rem/@baseFontSize;

      bottom: 20rem/@baseFontSize;

      li{

        margin-left: 12rem/@baseFontSize;

        width: 12rem/@baseFontSize;

        height: 12rem/@baseFontSize;

        border-radius: 50%;

        float: left;

        background: #fff;

        &.now{

          background: @snColor;

        }

      }

    }

  }

}

less/nav.less

.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;

        }

      }

    }

  }

}

less/tabs.less

.sn_tabs{

  width: 100%;

  height: 100rem/@baseFontSize;

  position: fixed;

  bottom: 0;

  left: 0;

  background: #fff;

  border-top: 1px solid #ccc;

  ul{

    width: 100%;

    li{

      width: 20%;

      float: left;

      padding-top: 10rem/@baseFontSize;

      a{

        display: block;

        width: 100%;

        text-align: center;

        span{

          font-size: 40rem/@baseFontSize;

        }

        p{

          padding-top: 5rem/@baseFontSize;

          font-size: 20rem/@baseFontSize;

          color: #666;

        }

      }

    }

  }

}

仿苏宁移动web页面自适应 rem&less的更多相关文章

web页面自适应手机屏幕宽度
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scal ...
手机端页面自适应解决方案—rem布局（进阶版，附源码示例）
转自:https://segmentfault.com/a/1190000007350680 一年前笔者写了一篇 <手机端页面自适应解决方案—rem布局>,意外受到很多朋友的关注和喜欢.但 ...
手机端页面自适应解决方案—rem布局进阶版
手机端页面自适应解决方案—rem布局进阶版 https://www.jianshu.com/p/985d26b40199 注:本文转载之处:https://www.cnblogs.com/anni ...
手机端页面自适应解决方案—rem布局（该方案目前已过时）
转自:https://segmentfault.com/a/1190000004705207 相信很多刚开始写移动端页面的同学都要面对页面自适应的问题,当然解决方案很多,比如:百分比布局,弹性布局fl ...
rem手机端页面自适应完美解决方案（最新）
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
移动端(手机端)页面自适应解决方案—rem布局篇
移动端(手机端)页面自适应解决方案-rem布局假设设计妹妹给我们的设计稿尺寸为750 * 1340.结合网易.淘宝移动端首页html元素上的动态font-size属性.设计稿尺寸.前端与设计之间协作 ...
html5--项目实战-仿天猫（移动端页面）
html5--项目实战-仿天猫(移动端页面) 总结: 1.标准搜索栏的做法:这里是弹性布局,放大镜和小话筒是background img 2.手机尾部导航做法:这是一个个 li 标签,每个li标签占% ...
移动web开发之rem适配布局
移动web开发之rem适配布局方案: 页面布局文字能否随着屏幕大小变化而变化流式布局和flex布局主要针对于宽度布局,那高度如何布局? 怎样让屏幕发生变化的时候元素高度和宽度等比例缩放? 1. r ...
「移动端」Web页面适配
一.什么是移动端适配移动端 Web 页面,就是常说的手机 h5页面.webview页面.公众号开发的网页等. 由于手机机型较多,各个手机的屏幕尺寸不一样,所以做移动端页面,需要考虑在安卓和ios的各 ...

随机推荐

windows 服务端狼人杀发牌器开发完成待继续开发其他服务
开发工具: python2.7 eric4 成果链接地址 https://wws.lanzous.com/iPCDTfnuoif
一键打开 jupyter
一般打开jupyter notebook 是以下步骤: 打开cmd-----输入:jupyter notebook-----按Enter键为了省事,写了一个.py文件实现上述步骤,代码如下: imp ...
Docker日常使用方式
前提在安装docker之前,建议你设置系统的国内镜像源先哦,很快~嗯,快. 阿里云镜像源:https://developer.aliyun.com/mirror/ 安装安装docker 下面都是官 ...
四则运算（C语言实现）
四则运算(c语言实现) 合伙人:魏甫——3118004973 ,温钦益——3118004975 https://github.com/iamdate/work/tree/master 一.项目及其要 ...
在服务器上使用python-gym出现的显示问题
参考链接: http://www.luyixian.cn/news_show_392045.aspx https://www.cnblogs.com/cenariusxz/p/12666938.htm ...
CentOS基础操作
一.修改IP地址 vim ../etc/sysconfig/network-scripts/ifcfg-ens33 在文件中修改或添加以下内容 TYPE=Ethernet PROXY_METHOD= ...
double与Double
1. double是基本数据类型,Double是原始数据类型(Java 类) 2. double创建引用,Double创建对象 3. double不可以为NULL,Double是类所以其对象是可以为N ...
06.深入学习redis replication的完整流程和原理
一.replication的完整流程 slave配置master ip和port # slaveof <masterip> <masterport> slaveof 127.0 ...
数据去重Distinct，IEqualityComparer，IEquatable
很多情况下我们查询数据需要去重重复数据,下面就记录三个去重的方法. Distinct 最基本的去重形式,直接查询出数据后使用Distinct方法进行字段去重. var strList = new Li ...
Laravel ServiceProvider注册过程及简单使用
Laravel ServiceProvider注册过程及简单使用还记得facade注册流程吗?回顾下在bootstrap/app.php中返回$app实例后,通过singleton方法绑定了三个实 ...

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

仿苏宁移动web页面 自适应 rem&less的更多相关文章

随机推荐

热门专题

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

仿苏宁移动web页面自适应 rem&less的更多相关文章