布局特点：

响应式布局指的是同一页面在不同屏幕尺寸下有不同的布局
需要一个布局容器，结合css的多媒体查询
在不同的设备宽度下，一定会产生不同的显示样式。某些元素会隐藏或显示，某些元素会从行内元素变成块状元素
传统的开发方式是PC端开发一套，手机端再开发一套，响应式布局相较于传统开发方式优点是只要开发一套就够，缺点就是CSS文件代码量大

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title>响应式布局思想及实例</title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }
        body {
            padding: 0 10px;
        }
        .container {
            margin: 20px auto;
        }
        nav li {
            float: left;
            list-style: none;
        }
        nav li a {
            display: block;
            width: 100%;
            height: 100%;
            border: 1px solid #fff;
            background-color: green;
            color: #fff;
            text-align: center;
            text-decoration: none;
            transition: all .5s ease;
        }
        
        /* 超小屏幕下 小于768px 布局容器的宽度为100% */
        @media screen and (max-width: 768px) {
            .container {
                width: 100%;
            }
            .container li {
                width: 33.333333%;
                height: 30px;
            }
            .container li a {
                font-size: 16px;
                line-height: 30px;
            }
        }
        /* 小屏幕下 大于等于768px 布局容器改为750px */
        @media screen and (min-width: 768px) {
            .container {
                width: 750px;
            }
            .container li {
                width: 25%;
                height: 40px;
            }
            .container li a {
                font-size: 20px;
                line-height: 40px;
            }
        }
        /* 中等屏幕下 大于等于992px 布局容器修改为970px */
        @media screen and (min-width: 992px) {
            .container {
                width: 970px;
            }
            .container li {
                width: 16.666666%;
                height: 70px;
            }
            .container li a {
                font-size: 24px;
                line-height: 70px;
            }
        }
        /* 大屏幕下 大于等于1200px 布局容器修改为1170px */
        @media screen and (min-width: 1200px) {
            .container {
                width: 1170px;
            }
            .container li {
                width: 8.333333%;
                height: 100px;
            }
            .container li a {
                font-size: 26px;
                line-height: 100px;
            }
        }
    </style>
</head>
<body>
    <!-- 响应式开发里面，首先需要一个布局容器 -->
    <div class="container">
        <nav>
            <ul>
                <li>
                    <a href="#">导航1</a>
                </li>
                <li>
                    <a href="#">导航2</a>
                </li>
                <li>
                    <a href="#">导航3</a>
                </li>
                <li>
                    <a href="#">导航4</a>
                </li>
                <li>
                    <a href="#">导航5</a>
                </li>
                <li>
                    <a href="#">导航6</a>
                </li>
                <li>
                    <a href="#">导航7</a>
                </li>
                <li>
                    <a href="#">导航8</a>
                </li>
                <li>
                    <a href="#">导航9</a>
                </li>
                <li>
                    <a href="#">导航10</a>
                </li>
                <li>
                    <a href="#">导航11</a>
                </li>
                <li>
                    <a href="#">导航12</a>
                </li>
            </ul>
        </nav>
    </div>
</body>
</html>

在这里插入图片描述

来源：CSDN

作者：杨筱斌

链接：https://blog.csdn.net/YWB88888888/article/details/103757969

标签

响应式布局

移动Web之响应式布局

布局特点：