效果图:
代码如下:
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1"/>
<link rel="stylesheet" href="css/jd.css" >
<title>仿制京东页面</title>
</head>
<body>
<header>
<a href="javascript:;"><img src="./img/caidan.png" alt="无法加载"></a>
<input type="search" placeholder="达能京东超级品牌日 5折秒杀">
<button>登录</button>
</header>
<div class="banner">
<div class="carousel clearfix">
<img src="./img/下载1.jpg" alt="">
<img src="./img/下载2.jpg" alt="">
<img src="./img/下载3.gif" alt="">
<img src="./img/下载4.gif" alt="">
</div>
</div>
<section class="center-menu">
<figure>
<img src="./img/chaoshi.png" alt="">
<figcaption>京东超市</figcaption>
</figure>
<figure>
<img src="./img/quanqiu.png" alt="">
<figcaption>京东超市</figcaption>
</figure>
<figure>
<img src="./img/fushi.png" alt="">
<figcaption>京东超市</figcaption>
</figure>
<figure>
<img src="./img/shengxian.png" alt="">
<figcaption>京东超市</figcaption>
</figure>
<figure>
<img src="./img/daojia.png" alt="">
<figcaption>京东超市</figcaption>
</figure>
<figure>
<img src="./img/chongzhi.png" alt="">
<figcaption>京东超市</figcaption>
</figure>
<figure>
<img src="./img/pin.png" alt="">
<figcaption>京东超市</figcaption>
</figure>
<figure>
<img src="./img/lingjuan.png" alt="">
<figcaption>京东超市</figcaption>
</figure>
<figure>
<img src="./img/zuanqian.png" alt="">
<figcaption>京东超市</figcaption>
</figure>
<figure>
<img src="./img/quanbu.png" alt="">
<figcaption>京东超市</figcaption>
</figure>
</section>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script src="js/rem.js"></script>
</body>
</html>
js
(function(doc, win) {
var docEl = doc.documentElement,
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
recalc = function() {
var clientWidth = docEl.clientWidth;
if (!clientWidth) return;
if(clientWidth>=375){//1.根据设计稿来填写/*例如:640/750.....*,2.高度自适应不用写固定的高度,如果有要求也可以写/
docEl.style.fontSize = '100px'
}else{
docEl.style.fontSize = 100 * (clientWidth / 375) + 'px';//设计稿的width和参数px的rem转换一般100
}
};
if (!doc.addEventListener) return;
win.addEventListener(resizeEvt, recalc, false);
doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);
css
* {
margin: 0;
padding: 0;
list-style: none;
box-sizing:border-box;
}
body,html{height:100%;}
/* 移动端默认样式清除 */
body *{
-webkit-text-size-adjust: 100%;/*横竖屏字体变化*/
-webkit-user-select: none;/*去除用户选中*/
}
a,input,button{/*按下阴影*/
-webkit-tap-highlight-color: raba(0,0,0,0);
}
button{
background-color:transparent;/*透明色*/
}
input,button{
border:none;
-moz-appearance: none;
-webkit-appearance: none;/*解决ios上按钮的圆角问题*/
border-radius: 0;/*解决ios上输入框圆角问题*/
outline: medium;/*去掉鼠标点击的默认黄色边框*/
}
html,body,ul,li,ol,dl,dd,dt,p,h1,h2,h3,h4,h5,h6,form,fieldset,legend,img,input,figure,figcaption{margin:0;padding:0;}
section,article,aside,header,footer,main,nav,hgroup{display:block;}
a,u{text-decoration:none;}
em,i{font-style:normal;}
b,strong{font-weight:normal;}
ul,ol,li{list-style:none;}
h1,h2,h3,h4,h5,h6{font-size:16px;font-weight:normal;}
body{font-family: "微软雅黑"}
input{outline:none;}
img{border:0;display:block;}
/* 根元素字体 */
html{
font-size: 26.66667vw;
}
body{
font-size: 16px;
}
body{
max-width: 1024px;
min-width: 320px;
overflow: hidden;
}
/* 媒介查询 */
/*当320设备时的适配*/
/*3200/375=8.533333333333333px*/
@media only screen and (min-device-width:310px) and (max-device-width:330px){
html{
font-size: 26.66667vw;
}
body{
font-size: 8.533333333333333px;
}
}
/*7680/375=20.48px*/
/*当平板设备的适配*/
@media only screen and (min-device-width:700px) and (max-device-width:780px){
body{
font-size: 20.48px;
}
}
/* 头部 */
header{
box-sizing: border-box;
width: 100%;
height:0.5rem;
background-image: linear-gradient(rgba(0,0,0,.7),rgba(0,0,0,.5),rgba(0,0,0,.4));
position: fixed;
display: flex;
align-items: center;
top:0;
left:0;
z-index: 10;
}
header a{
display: block;
width:0.5rem;
text-align: center;
color:white;
}
header button{
width:0.45rem;
color:white;
}
header input{
flex: 1;
height: 0.3rem;
border-radius: 0.3rem;
padding-left: 0.76rem;
background:url(../../jquery/img/jingdong.png) 0.16rem center/0.2rem 0.16rem no-repeat,
white url(../../jquery/img/sousuo.png) 0.54rem center/0.14rem 0.14rem no-repeat;
}
header a img{
width:100%;
display: inline-block;
}
/* 清除浮动的伪元素 */
/*当父级元素和祖级元素高度塌陷时,给父级元素设定,可以解决高度塌陷问题*/
.clearfix::after{
display: block;
height: 0;
content:'';
clear: both;
visibility:hidden;
}
/* 内容 */
.banner{
width: 100%;
max-width: 1024px;
overflow: hidden;
}
.banner .carousel{
width:1000%;
animation:carousel 6s linear infinite;
}
.carousel img{
width: 10%;
float: left;
}
@keyframes carousel{
0%{
transform: translateX(0);
}
15%{
transform: translateX(0);
}
20%{
transform: translateX(-10%);
}
50%{
transform: translateX(-10%);
}
55%{
transform: translateX(-20%);
}
85%{
transform: translateX(-20%);
}
90%{
transform: translateX(-30%);
}
100%{
transform: translateX(-30%);
}
}
.center-menu{
display:flex;
justify-content: space-around;
flex-wrap: wrap;
}
figure{
width:20%;
text-align: center;
margin-top:0.1rem;
}
figure img{
display: inline-block;
width:45%;
}
figcaption{
font-size: 12px;
color:#666666;
}
/* 底部 */
总结:
1.移动端的适配设备与设备之间差距较大时候可以通过min-device-width和max-device-width进行适配。
例子:
@media only screen and (min-device-width:700px) and (max-device-width:780px){
body{
font-size: 20.48px;
}
}
2.要兼容所有的适配可以用以下方法设置所有的设备
这里只写到了640px,如果要适配750、1024…就继续
往下写。
(要点:设备是通过根元素的变化而进行适合设备的变化)
@media only screen and (min-width: 320px) {
html {
font-size: 13.65px !important;
}
}
@media only screen and (min-width: 360px) {
html {
font-size: 15.36px !important;
}
}
@media only screen and (min-width: 375px) {
html {
font-size: 16px !important;
}
}
@media only screen and (min-width: 390px) {
html {
font-size: 16.64px !important;
}
}
@media only screen and (min-width: 414px) {
html {
font-size: 17.664px !important;
}
}
@media screen and (min-width: 640px) {
html {
font-size: 27.31px !important;
}
}
3.这里的轮播图效果使用css3来写的,项目中要进行上一页和下一页那种效果的轮播图,可以参考上一篇文章:JQ的轮播图
4.px转换成rem,可以参考上一篇文章,有讲解到操作步骤。
5.以上的效果实现,可以自由更换自己的图片,就可以运行效果了。