移动端之响应式布局

最新推荐文章于 2024-04-07 09:05:27 发布

MDR_0820

最新推荐文章于 2024-04-07 09:05:27 发布

阅读量127

点赞数 1

文章标签： css html html5 移动开发

本文链接：https://blog.csdn.net/MDR_0820/article/details/120720687

版权

响应式布局媒体查询屏幕适应容器宽度前端开发

关键词由CSDN通过智能技术生成

移动端之响应式布局

响应式开发

原理就是使用媒体查询针对不同宽度的设备进行布局和样式设置从而适配不同设备的目的

在这里插入图片描述

响应式布局容器

在这里插入图片描述
代码展示

<style>
        .container{
            height: 188px;
            background-color: skyblue;
            margin:  100px auto;
        }
            /* 超小屏幕下 小于768px 最大不大于768 所以给个767  布局容器的宽度设置100% */
            @media screen and (max-width:767px) {
                .container{
                    width: 100%;
                }
            }
         /* 小屏幕下 大于 等于 768px 最小不小于768 布局容器的宽度设置750px */
         @media screen and (min-width:768px) {
                .container{
                    width: 750px;
                }
            }
            /* 中等屏幕下 大于 等于 992px 最小不小于992px 布局容器的宽度设置970px */
            @media screen and (min-width:992px) {
                .container{
                    width: 970px;
                }
            }
             /* 大屏幕下 大于 等于 1200px 最小不小于1200px 布局容器的宽度设置1170px */
             @media screen and (min-width:1200px) {
                .container{
                    width: 1170px;
                }
            }
    </style>
</head>
<body>
    <!-- 响应式开发里面 首先需要一个布局容器 -->
    <div class="container"></div>
</body>