常用布局：banner 页面头部常无法兼容小屏幕，我们可以使得背景根据屏幕的高度进行剪切实现自适应。。。。。。【banner自适应】21cake

当做页面的时候（设计稿的尺寸是1920px），可是经常会发现，当在小屏幕下浏览的时候，头部内容显示不全。

方法1：如果图片做图片的形式，使用<img>标签来插入到页面中，img{ width:100%;}，可以轻松实现图片跟随屏幕的大小来缩放.但是当在较大屏幕（width>1920px）的电脑屏幕下时，图片会变得比较模糊。

此时必须要给图片设置个最大宽度1920px,最小宽度1024px

 

 方法2：之前的常规做法是使得头部的图片作为背景，居中显示

 background: url("../images/banner.png") center top no-repeat;  height: 700px;

此方法，可以实现头部图片居中显示，也不会模糊，但是在较小屏幕下访问的时候，会出现头部的图片是根据宽度来剪切的，也就是说，我们只能看到最中间的部分（我们会要求设计稿的主体内容放在1280px内）

效果如下：如果设计的内容超出1280px时，将会看不到内容。

 

 

方法3：在方法2的基础上进行升级，再通过js来控制图片的缩放

.sec-banner{ max-width: 1920px; max-height: 600px; background:#d6e4cf url("../images/banner.png")  no-repeat scroll center center / auto 100%;  } /*头部适配
 *当屏幕较小时：根据高度对背景进行剪切，
 *当屏幕超过1920px：多余的显示背景色，防止较大屏幕时，出现白边， 设置最大宽度 max-width: 1920px
 *限定最大高度为实际高度 max-height
 */

   /*sec-banner适配小屏幕
    * 头部的高度为窗口的高度-导航的高度-底部剩余的高度（可无）：$(window).height()-120-250
    * 设置最小高度bannerHeight <= 440；
    *设置屏幕缩放$(window).resize();
    */
    var bannerHeight;
    function bannerFun() {
      bannerHeight = $(window).height()-120-250;
      if(bannerHeight <= 440){
        bannerHeight= 440;
      }
      console.log(bannerHeight);
      return bannerHeight;
    }
    bannerFun();
    $(".sec-banner").css('height',bannerHeight);
    /*缩放窗口*/
    $(window).resize(function() {
      bannerFun();
      $(".sec-banner").css('height',bannerHeight);
    });

 

 

举例子：

大屏幕：下部分还需要显示日历

(mcake2月会员日)

 

 小屏幕：

 

 

css:

/*头部适配
  *当屏幕较小时：根据高度对背景进行剪切，
  *当屏幕超过1920px：多余的显示背景色，防止较大屏幕时，出现白边， 设置最大宽度 max-width: 1920px
  *限定最大高度为实际高度 max-height
  */

.sec-banner{ max-width: 1920px; max-height: 600px; height: 100%;
  background:#d6e4cf url("../images/banner.png")  no-repeat scroll center center / auto 100%;
  background:url("../images/banner.png") center no-repeat \0; /*兼容ie8*/
  overflow: hidden;
  .banner-t{ width: 50%; margin:20% auto 0; border: red 1px solid;   /*banner内部有居中的图片*/
    img{width: 100%;}
  }
}

@media (max-width: 1600px) { /*兼容小屏*/
  .sec-banner{
    .banner-t{ width: 50%; margin:13% auto 0; border: red 1px solid;}
  }
  .sec-1{
    .calendar{width:42%; margin:-100px auto 0;}
  }
 }

 

js:

    /*sec-banner适配小屏幕
     * 头部的高度为窗口的高度-导航的高度-底部剩余的高度（可无）：$(window).height()-120-250
    * 设置最小高度bannerHeight <= 440；
    *设置屏幕缩放$(window).resize();
    * */
    var bannerHeight;
    function bannerFun() {
      bannerHeight = $(window).height()-120-250;
      if(bannerHeight <= 440){
        bannerHeight= 440;
      }
      console.log(bannerHeight);
      return bannerHeight;
    }
    bannerFun();
    $(".sec-banner").css('height',bannerHeight);
    /*缩放窗口*/
    $(window).resize(function() {
      bannerFun();
      $(".sec-banner").css('height',bannerHeight);
    });

 

21cake的头部布局：https://www.21cake.com/

css

 

background-image: url("//static.21cake.com/upload/images/1c7d0a4b3214156323e637bceb604366.jpg");
display: inline-block;
width: 100%;
height: 100%;
background-position: center center;
background-repeat: no-repeat;
transform: scale(1);
backface-visibility: hidden;
transition: all 5s ease 0s;

 

js

<script>
        var sliderHeight = $(window).height()-80-140;
        if(sliderHeight <= 480){
            sliderHeight= 480;
        }
        $('.slide').css('height',sliderHeight)
</script>