移动端适配和rem布局的各种详细步骤。

效果图:
在这里插入图片描述
代码如下:
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>

(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.以上的效果实现，可以自由更换自己的图片，就可以运行效果了。

移动端适配和rem布局的各种详细步骤。

猜你喜欢