黑马程序员技术交流社区

标题: 【成都校区】Web 响应式布局 [打印本页]
作者: 小蜀哥哥    时间: 2019-9-5 13:01
标题: 【成都校区】Web 响应式布局
[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);

    }

}






欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/) 黑马程序员IT技术论坛 X3.2