[学习交流] 【成都校区】Web 响应式布局

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

[Bash shell] 纯文本查看 复制代码

npm install sass-loader node-sass --save

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

[HTML] 纯文本查看 复制代码

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

Eg:
注意：and 后面有空格

[HTML] 纯文本查看 复制代码

<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>

布局

[HTML] 纯文本查看 复制代码

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

响应式布局

[CSS] 纯文本查看 复制代码

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

宽度使用百分比

[CSS] 纯文本查看 复制代码

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

图片处理

[CSS] 纯文本查看 复制代码

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);
    }
}

帐号		自动登录	找回密码
密码			加入黑马

[学习交流] 【成都校区】Web 响应式布局

0 个回复