仿苏宁移动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的各 ...
随机推荐
- Android studio 运行程序出现两个apk的解决方案
保留主项目中的 intent-filter,将其他module中 AndroidManifest.xml文件的intent-filter的内容删除掉即可. 感恩:https://blog.csdn.n ...
- java引用传递还是值传递？
首先,不要纠结于 Pass By Value 和 Pass By Reference 的字面上的意义,否则很容易陷入所谓的“一切传引用其实本质上是传值”这种并不能解决问题无意义论战中.更何况,要想知道 ...
- Linux基础 Day1
Linux-Day1 1.用户登录 root用户 是一个特殊的管理账号,也可以称为超级管理员 root用户对系统有完全控制的权限 对系统的损害会无限大 在工作中,如果没有特殊的必要,尽量不要使用roo ...
- 计算机网络-网络层（6）ICMP协议
互联网控制报文协议(ICMP,Internet Control Message Protocol),被主机和路由器用来彼此沟通网络层的信息 ICMP报文是承载在IP分组中的,即lCMP报文是作为IP有 ...
- 3D渲染集群，你了解多少？
摘要:渲染是批处理运行模式,那能不能使用Docker容器技术,做大规模的渲染集群呢? 我们先说说3D渲染涉及哪些领域: 1.什么是3D渲染 简单粗暴的讲:就是将虚拟世界里的3D模型,变为(人眼看到)平 ...
- 欢迎来到 C＃ 9.0（Welcome to C# 9.0）【纯手工翻译】
翻译自 Mads Torgersen 2020年5月20日的博文<Welcome to C# 9.0>,Mads Torgersen 是微软 C# 语言的首席设计师,也是微软 .NET 团 ...
- 洛谷P3817 小A的糖果 贪心思想
一直觉得洛谷的背景故事很....直接题解吧 #include <bits/stdc++.h> //万能头文件 using namespace std; int a[100002]; // ...
- Idea创建maven加载过慢解决方法
添加标签:archetypeCataloginternal问题解决!
- 在CG/HLSL中访问着色器的内容
着色器在Properties代码块中声明 材质球的各种特性.如果你想要在着色器程序中使用这些特性,你需要在CG/HLSL中声明一个变量,这个变量需要与你要使用的特性拥有同样的名字和对的上号的类型.比如 ...
- Python基本
Python基本规则 1.面向对象的跨平台的编程语言 2.文件类型是.py, 3.一个文件是一个模块module,运行整个文件 4.不支持非英文字符,区分大小写 5.一行是一条语句,多条语句写一行用; ...