Web 响应式布局

• 屏幕分类
• 超小屏幕 （移动设备） w<768px
• 小屏设备 768px-992px 768 <= w <992
• 中等屏幕 992px-1200px 992 =< w <1200
• 宽屏设备 1200px以上 w>=1200

npm install sass-loader node-sass --save

注意：<style scoped lang="scss">

<style scoped lang="scss">
    @media screen and (max-width: 600px) { 
      .class {
          background: #ccc;
       }          
    }
</style>

Eg:
注意：and 后面有空格

<style>
    .container{
        width:1200px;
        margin: 0 auto;
        height:1200px;
        background-color: red;
    }
    /*iphone: w < 768px*/
    @media screen and (max-width: 768px){
        .container{
            width:100%;
            background-color: green;
        }
    }
    /*pad: w >= 768  && w< 992*/
    @media screen and (max-width: 992px) and (min-width: 768px) {
        .container{
            width:750px;
            background-color: blue;
        }
    }
    /*中等屏幕   w >= 992  && w<1200*/
    @media screen and (max-width: 1200px) and (min-width: 992px) {
        .container{
            width:970px;
            background-color: yellow;
        }
    }
</style>

• 布局

<style scoped lang="scss”>
</style>

• 响应式布局

/*1500px和1640px之间*/
@media only screen and (min-width: 1500px) and (max-width: 1640px) {
    /*样式布局*/
}
/*小于750px*/
@media screen and (max-width: 750px) {
         
}

• 宽度使用百分比

#head { width: 100% }
#content { width: 50%; }

• 图片处理

img { width: auto; max-width: 100%; }
<img src="image.jpg"
     data-src-600px="image-600px.jpg"
     data-src-800px="image-800px.jpg"
     alt="">
@media (min-device-width:600px) {
    img[data-src-600px] {
        content: attr(data-src-600px, url);
    }
}

@media (min-device-width:800px) {
    img[data-src-800px] {
        content: attr(data-src-800px, url);
    }
}