仿苏宁移动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的各 ...

随机推荐

019-链接使用name属性
路由设置: (r'/', index.IndexHandler), tornado.web.url(r'/lj', index.LJHandler, {"word3":" ...
Python 用DataFrame读存 excel
读代码: import pandas as pd e = r'D:\pywork\12\excel信息表.xlsx' df = pd.DataFrame(pd.read_excel(e)) 存 D. ...
1.MongoDB 2.7主从复制(master –> slave)环境基于时间点的恢复
(一)MongoDB恢复概述对于任何类型的数据库,如果要将数据库恢复到过去的任意时间点,否需要有过去某个时间点的全备+全备之后的重做日志,MongoDB也不例外.使用全备将数据库恢复到固定时刻,然后 ...
28个漂亮的React.js后台管理模板
React管理模板为您的React Web应用程序开发一个管理区域可能非常耗时.它与设计所有前端页面一样重要. 这是2020年设计出色的顶级React.js后台管理模板的列表. 这些模板确实有价值, ...
SpringCloude简记_part3
18. SpringCloud Alibaba Sentinel实现熔断与限流 18.1 Sentiel 官网 https://github.com/alibaba/Sentinel 中文 https ...
CentOS7 安装图形化桌面
1.装好CentOS7后,我们一开始是上不了网的 (ping 百度报错:Name or service not know) 2.输入dhclient,可以自动获取一个IP地址,再用命令ip addr查 ...
直播报名 | 8.29 Kylin Meetup – 来聊聊云原生
云原生的巨浪正在席卷全球的软件产业,包括开源和商业软件.Apache Kylin 正在为此而积极准备着:基于新的计算和存储引擎,即将发布的 Kylin 4.0 将实现真正的计算和存储分离,减小运维难度 ...
springboot + mybatisPlus 入门实例入门demo
springboot + mybatisPlus 入门实例入门demo 使用mybatisPlus的优势集成mybatisplus后,简单的CRUD就不用写了,如果没有特别的sql,就可以不用ma ...
Java多线程_Future设计模式
Future模式的核心:去除了主函数的等待时间,并使得原本需要等待的时间段可以用于处理其他业务逻辑. Future模式有点类似于商品订单.在网上购物时,提交订单后,在收货的这段时间里无需一直在家 ...
Linux bpytop工具介绍
一.工具简介: Easy to use, with a game inspired menu system. Full mouse support, all buttons with a highli ...

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

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

随机推荐

热门专题

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

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