• 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的更多相关文章

  1. web页面自适应手机屏幕宽度

    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scal ...

  2. 手机端页面自适应解决方案—rem布局(进阶版,附源码示例)

    转自:https://segmentfault.com/a/1190000007350680 一年前笔者写了一篇 <手机端页面自适应解决方案—rem布局>,意外受到很多朋友的关注和喜欢.但 ...

  3. 手机端页面自适应解决方案—rem布局进阶版

    手机端页面自适应解决方案—rem布局进阶版   https://www.jianshu.com/p/985d26b40199 注:本文转载之处:https://www.cnblogs.com/anni ...

  4. 手机端页面自适应解决方案—rem布局(该方案目前已过时)

    转自:https://segmentfault.com/a/1190000004705207 相信很多刚开始写移动端页面的同学都要面对页面自适应的问题,当然解决方案很多,比如:百分比布局,弹性布局fl ...

  5. rem手机端页面自适应完美解决方案(最新)

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  6. 移动端(手机端)页面自适应解决方案—rem布局篇

    移动端(手机端)页面自适应解决方案-rem布局 假设设计妹妹给我们的设计稿尺寸为750 * 1340.结合网易.淘宝移动端首页html元素上的动态font-size属性.设计稿尺寸.前端与设计之间协作 ...

  7. html5--项目实战-仿天猫(移动端页面)

    html5--项目实战-仿天猫(移动端页面) 总结: 1.标准搜索栏的做法:这里是弹性布局,放大镜和小话筒是background img 2.手机尾部导航做法:这是一个个 li 标签,每个li标签占% ...

  8. 移动web开发之rem适配布局

    移动web开发之rem适配布局 方案: 页面布局文字能否随着屏幕大小变化而变化 流式布局和flex布局主要针对于宽度布局,那高度如何布局? 怎样让屏幕发生变化的时候元素高度和宽度等比例缩放? 1. r ...

  9. 「移动端」Web页面适配

    一.什么是移动端适配 移动端 Web 页面,就是常说的手机 h5页面.webview页面.公众号开发的网页等. 由于手机机型较多,各个手机的屏幕尺寸不一样,所以做移动端页面,需要考虑在安卓和ios的各 ...

随机推荐

  1. windows 服务端 狼人杀 发牌器 开发完成 待继续开发其他服务

    开发工具: python2.7 eric4 成果链接地址 https://wws.lanzous.com/iPCDTfnuoif

  2. 一键打开 jupyter

    一般打开jupyter notebook 是以下步骤: 打开cmd-----输入:jupyter notebook-----按Enter键 为了省事,写了一个.py文件实现上述步骤,代码如下: imp ...

  3. Docker日常使用方式

    前提 在安装docker之前,建议你设置系统的国内镜像源先哦,很快~嗯,快. 阿里云镜像源:https://developer.aliyun.com/mirror/ 安装 安装docker 下面都是官 ...

  4. 四则运算(C语言实现)

    四则运算(c语言实现) 合伙人:魏甫——3118004973  ,温钦益——3118004975 https://github.com/iamdate/work/tree/master 一.项目及其要 ...

  5. 在服务器上使用python-gym出现的显示问题

    参考链接: http://www.luyixian.cn/news_show_392045.aspx https://www.cnblogs.com/cenariusxz/p/12666938.htm ...

  6. CentOS基础操作

    一.修改IP地址 vim  ../etc/sysconfig/network-scripts/ifcfg-ens33 在文件中修改或添加以下内容 TYPE=Ethernet PROXY_METHOD= ...

  7. double与Double

    1. double是基本数据类型,Double是原始数据类型(Java 类) 2. double创建引用,Double创建对象 3. double不可以为NULL,Double是类所以其对象是可以为N ...

  8. 06.深入学习redis replication的完整流程和原理

    一.replication的完整流程 slave配置master ip和port # slaveof <masterip> <masterport> slaveof 127.0 ...

  9. 数据去重Distinct,IEqualityComparer,IEquatable

    很多情况下我们查询数据需要去重重复数据,下面就记录三个去重的方法. Distinct 最基本的去重形式,直接查询出数据后使用Distinct方法进行字段去重. var strList = new Li ...

  10. Laravel ServiceProvider注册过程及简单使用

    Laravel ServiceProvider注册过程及简单使用 还记得facade注册流程吗?回顾下 在bootstrap/app.php中返回$app实例后,通过singleton方法绑定了三个实 ...