仿苏宁移动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的各 ...
随机推荐
- 28个漂亮的React.js后台管理模板
React管理模板 为您的React Web应用程序开发一个管理区域可能非常耗时.它与设计所有前端页面一样重要. 这是2020年设计出色的顶级React.js后台管理模板的列表. 这些模板确实有价值, ...
- Python Matplotlib绘图基础
Matplotlib绘图基础 1.Figure和Subplot import numpy as np import matplotlib.pyplot as plt #创建一个Figure fig = ...
- centos yum 安装golang
rpm -Uvh http://dl.fedoraproject.org/pub/epel/6/x86_64/epel-release-6-8.noarch.rpm yum install golan ...
- 斗地主小游戏随机发牌PHP代码
<?php header("Content-Type:text/html;charset=UTF-8"); $num=['A','2','3','4','5','6','7' ...
- WordCount of Software Engineering
1.Github项目地址:https://github.com/BayardM/WordCount 2.PSP表格(before): PSP2.1 Personal Software Process ...
- oracle练习前期准备
oracle练习前期准备 登陆scott用户(默认密码tiger),开始一般提示用户已锁. 解决办法:登陆sys或system用户解锁 输入命令alter user scott account unl ...
- Jenkins匿名用户设置
最近自己安装配置jenkins,但是跑任务时,发现是匿名账户登录,可以在系统设置中点击如下: 2.勾选“启用安全”,“访问控制”>“安全域”选择“Jenkins专有用户数据库”,并勾选“允许用户 ...
- vue的修饰符
v-on 缩写:@ 事件修饰符 .stop - 调用 event.stopPropagation(). //阻止冒泡 .prevent - 调用 event.preventDefault(). //阻 ...
- 《Head First 设计模式》：模板方法模式
正文 一.定义 模板方法模式在一个方法中定义一个算法的骨架,而将一些步骤延迟到子类中.模板方法使得子类可以在不改变算法结构的情况下,重新定义算法中的某些步骤. 要点: 模板方法定义了一个算法的步骤,每 ...
- Framework项目持续集成(jenkins)及集合SonarQube
目录 Framework项目持续集成及集合SonarQube - 前言 CI/CD是什么 -- jenkins 什么是sonarqube?什么是CodeReview? 什么是sonarqube? 什么 ...