仿苏宁移动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的各 ...
随机推荐
- python数据类型分类（可变（不可变）数据类型）
一:python数据类型的分类: 可变(不可哈希)的数据类型: list 列表 dict 字典 set 集合 不可变(可哈希)的数据类型: str 字符串 bool 布尔型 int 整型 tuple ...
- PythonCrashCourse 第三章习题
PythonCrashCourse 第三章习题 3.1 将一些朋友的姓名存储在一个列表中,并将其命名为names.依次访问该列表中的每个元素,从而将每个朋友的姓名都打印出来 names = ['lih ...
- （趣味哈哈镜）JMF中摄像头相关的问题
JMF已经非常古老了.最近由于做实验的需要,不得不使用JMF处理视频.开发使用win10系统和eclipse.使用中的问题如下: 1.首先想要使用JMF需要必须安装32位JDK,同时编译软件也需要是3 ...
- python之常用正则表达式
以下整理python中常用的正则符号,相信能够熟悉掌握这些正则符号,大部分字符串处理将会游刃有余. 符号 含义 示例 . 可以匹配任意字符,但不包含换行符'\n' Pyt.on ->Pytmon ...
- MySQL引擎【转】
数据库引擎介绍MySQL数据库引擎取决于MySQL在安装的时候是如何被编译的.要添加一个新的引擎,就必须重新编译MYSQL.在缺省情况下,MYSQL支持三个引擎:ISAM.MYISAM和HEAP.另外 ...
- Flink-1.10.0中的readTextFile解读
Flink-1.10.0中的readTextFile解读 最近在学习Flink,研究了一些东西,在准备自定义一个简单的监听文件的source作为练手的时候,遇到了一个问题.就是应该如何在自己的sour ...
- DBeaver链接kerberos安全认证的Phoenix集群
DBeaver链接kerberos安全认证的Phoenix集群 最近公司的CDH集群,启动了kerberos安全认证,所有的用户验证全部需要依赖kerberos来进行.之前的裸奔集群,总算有了一些安全 ...
- 方法在class文件中的存在形式MethodInfo
一个方法对由一个method_info结构所定义.一个class文件中,不会同时出现两个方法同时有相同的名称和描述符 method_info结构如下 参考Field 代码实现 public class ...
- day03 每日一行
day03 每日一行 问题描述 用列表解释式 .生成器表达式实现 字典列表为: [{'first': 'john', 'last': 'smith', 'email': 'jsmith@exsampl ...
- Unity资源引用问题
前几天做项目时,遇到一个奇怪的问题: 从一处复制了一个预制体,预制体上面还附有一个材质球,材质球上关联着另一张贴图. 将所有关联的东西,均Copy两份,然后关联成一个新的预制体,最后用项目内的读取内存 ...