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

随机推荐

Linked server的一个问题
好久没有写新的博客,主要是很久没有什么动力和需求来写程序.虽然也不是一点没写,但都缺乏技术含量,没什么可说的. 前两天碰到一个关于linked server的问题.本地的sql server里,通过l ...
Android app启动出现白屏闪屏
出现白屏闪屏原因: 进入到AppStartActivity,但是未加载到布局文件,就先显示了窗口的背景,白屏就是显示的windows的背景,即所设置的theme. onCreate()中的setCon ...
【服务器部署】Django+宝塔+Nginx_uwsgi部署
:CentOS安装脚本: yum install -y wget && wget -O install.sh http://download.bt.cn/install/install ...
测量定位实践-:C#采集控制
用Halcon已经完成采集,在在C#中不行. 其实还是比较简单,主要是Halcon封装的太好了. 主要是以下几个算子: *打开 Image Acquisitionopen_framegrabber ( ...
Linux用户和组密令大全
本文总结了Linux添加或者删除用户和用户组时常用的一些命令和参数. 1.建用户: adduser phpq passwd phpq ...
cinder migrate基础内容-1
一.卷迁移rest api接口 POST /v2/{project_id}/volumes/{volume_id}/action 迁移一个卷到特定的主机,在请求体中指定 os-migrate_volu ...
创建human用户登录数据库创建表
根据人力资源管理系统中表的设计,创建human用户登录数据库创建准备阶段把运行脚本复制到D:\app\Administrator\product\11.2.0\dbhome_1\demo\sche ...
关于Junit4 和 Junit5.4
1. Junit5.4 主要是用于Maven框架 , 对普通类的测试是不可以的. 如这个, junit4可以, junit5.4不可以. 2. Junit不可以使用 static 静态方法. 关 ...
[PKUWC2018]Minimax 题解
根据题意,若一个点有子节点,则给出权值:否则可以从子节点转移得来. 若没有子节点,则直接给出权值: 若只有一个子节点,则概率情况与该子节点完全相同: 若有两个子节点,则需要从两个子节点中进行转移. 如 ...
C++入门记-大纲
缘来由于某个不可告人的目标以及想趁着还有精力的年龄,开始了C++学习之路.C++ 诞生很多年了,但依然具有强大的生命力. 我们来看下2020年8月TIOBE 8 月编程语言排行榜. 可以看到C以及C ...

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

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

随机推荐

热门专题

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

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