background

自适应宽高

width: 100%;
height: 910px;
background-position: center center;
background-size: cover;

多张背景图拼接

/* bg1 height: 2074px 32% */
/* bg2 height: 2198px 34% */
/* bg3 height: 2158px 34% */

background: url(bg1.jpg) top no-repeat, url(bg2.jpg) 32% no-repeat, url(bg3.jpg) bottom no-repeat;
background-size: 100% 33%, 100% 34%, 100% 34%;
width: 100%;
height: 6430px;

Margin 塌陷

子元素 margin 撑到父元素上，在父元素上使用 overflow: hidden;

元素重叠

上面的元素相对定位，设置了 top，导致和下面的元素重叠

Sprite Image

雪碧图显示错误可能是线上被相同名称的图片覆盖，（后打包的图片也可能覆盖之前的

vw, vh

vw, vh视区大小相关单位只适用于非定位元素的高度相关属性

仅使用 vw 作为 CSS 单位

1. 根据设计稿的尺寸转换为 vw 单位

   //iPhone 6尺寸作为设计稿基准
   $vm_base: 375;
   @function vm($px) {
       @return ($px / 375) * 100vw;
   }
   
   

2. 无论是文本还是布局高宽、间距等都使用 vw

   < div class="mod_nav">
               < nav class="mod_nav_list" v-for="n in 5">
                   < a href="#" class="mod_nav_list_item">
                       < span class="mod_nav_list_item_logo">
                   < img src="<http://jdc.jd.com/img/80>">
                       < /span>
                       < p class="mod_nav_list_item_name">导航入口< /p>
                   < /a>
               < /nav>
   < /div>
   .mod_nav {
       background: #fff;
       &_list {
           display: flex;
           padding: vm(15) vm(10) vm(10);
           &_item {
               flex: 1;
               text-align: center;
               font-size: vm(10);
               &_logo {
                   display: block;
                   margin: 0 auto;
                   width: vm(40);
                   height: vm(40);
                   img {
                       display: block;
                       margin: 0 auto;
                       max-width: 100%;
                   }
               }
               &_name {
                   margin-top: vm(2);
               }
           }
       }
   }
   
   

最优做法——搭配vw和rem

vw 利用视口单位实现，依赖于视口大小而自动缩放，失去了最大最小宽度的限制。所以，我们需要结合rem单位来实现布局，而rem正好可以动态改变根元素大小

1. 给根元素大小设置vw–动态改变大小。
2. 限制根元素font-size的最大最小值，配合body加上最大最小宽度。