响应式布局-媒体查询父级布局容器

news2024/11/18 19:51:10

1.响应式布局容器

父局作为布局容器，配合自己元素实现变化效果，原理：在不通过屏幕下面吗，通过媒体查询来改变子元素的排列方式和大小，从而实现不同尺寸屏幕下看到不同的效果。

2.响应尺寸布局容器常见宽度划分

手机-小于768px 宽度设置100%；

平板-大于等于768px 设置宽度为750px

桌面显示器-大于等于992px 设置宽度 970px

大屏幕显示器-大于等于1200px 宽度设置为 1170px;

设置宽度比屏幕尺寸小，留取左右空白居中对齐；

3.媒体查询检测屏幕尺寸应用样式

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .content {
            height: 400px;
            background-color: red;
            margin: 0 auto;
        }

        /* 手机-小于768px 宽度设置100%；*/
        @media screen and (max-width:767px) {
            .content {
                width: 100%;
            }
        }

        /* 平板-大于等于768px 设置宽度为750px */
        @media screen and (min-width:768px) {
            .content {
                width: 750px;
            }
        }

        /* 桌面显示器-大于等于992px 设置宽度 970px */
        @media screen and (min-width:992px) {
            .content {
                width: 970px;
            }
        }

        /* 大屏幕显示器-大于等于1200px 宽度设置为 1170px; */
        @media screen and (min-width:1200px) {
            .content {
                width: 1170px;
            }
        }
    </style>
</head>

<body>
    <div class="content">

    </div>
</body>

</html>