响应式布局原理

最新推荐文章于 2024-05-27 15:31:37 发布

阳光的男夹克

最新推荐文章于 2024-05-27 15:31:37 发布

阅读量197

点赞数

分类专栏：布局

本文链接：https://blog.csdn.net/weixin_44640323/article/details/113091621

版权

布局专栏收录该内容

6 篇文章 0 订阅

订阅专栏

响应式开发里面，首先需要一个布局容器

<body>
    <!-- 响应式开发里面，首先需要一个布局容器 -->
    <div class="container"></div>
</body>

使用媒体查询 @media screen and (max-width: 767px)

<style>
    .container {
        height: 150px;
        background-color: pink;
        margin: 0 auto;
    }
    /* 1. 超小屏幕下  小于 768  布局容器的宽度为 100% */
    
    @media screen and (max-width: 767px) {
        .container {
            width: 100%;
        }
    }
    /* 2. 小屏幕下  大于等于768  布局容器改为 750px */
    
    @media screen and (min-width: 768px) {
        .container {
            width: 750px;
        }
    }
    /* 3. 中等屏幕下 大于等于 992px   布局容器修改为 970px */
    
    @media screen and (min-width: 992px) {
        .container {
            width: 970px;
        }
    }
    /* 4. 大屏幕下 大于等于1200 布局容器修改为 1170 */
    
    @media screen and (min-width: 1200px) {
        .container {
            width: 1170px;
        }
    }
</style>