【响应式】使用媒体查询实现响应式页面

蟹黄汤包_

已于 2024-07-15 21:26:09 修改

阅读量284

点赞数 5

文章标签：媒体 css javascript

于 2024-07-15 20:06:38 首次发布

本文链接：https://blog.csdn.net/weixin_43726152/article/details/140447723

版权

创建了一个导航栏，其中包含8个列表项。CSS样式定义了导航栏的基本样式，并使用媒体查询来调整不同分辨率下的布局：

当屏幕宽度大于1200px时，默认显示8列。
当屏幕宽度在1200px到992px之间时，导航栏变为4列。
当屏幕宽度在992px到768px之间时，导航栏变为3列。
当屏幕宽度在768px到576px之间时，导航栏变为2列。
当屏幕宽度小于576px时，导航栏完全隐藏。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Responsive Navigation</title>
    <style>
        body {
            font-family: Arial, sans-serif;
        }
        nav {
            display: flex;
            background-color: #f8f9fa;
            padding: 10px;
        }
        nav ul {
            list-style-type: none;
            padding: 0;
            margin: 0;
            display: flex;
        }
        nav li {
            margin: 0 10px;
            padding: 5px 10px;
            background-color: #007bff;
            color: white;
        }

        /* 媒体查询：当屏幕宽度小于1200px时，显示4列 */
        @media (max-width: 1199px) {
            nav ul {
                flex-wrap: wrap;
            }
            nav li {
                flex: 1 0 25%; /* 4列 */
            }
        }

        /* 媒体查询：当屏幕宽度小于992px时，显示3列 */
        @media (max-width: 991px) {
            nav li {
                flex: 1 0 33.33%; /* 3列 */
            }
        }

        /* 媒体查询：当屏幕宽度小于768px时，显示2列 */
        @media (max-width: 767px) {
            nav li {
                flex: 1 0 50%; /* 2列 */
            }
        }

        /* 媒体查询：当屏幕宽度小于576px时，不显示导航栏 */
        @media (max-width: 575px) {
            nav {
                display: none;
            }
        }
    </style>
</head>
<body>

    <nav>
        <ul>
            <li>首页</li>
            <li>产品</li>
            <li>服务</li>
            <li>关于我们</li>
            <li>联系方式</li>
            <li>支持</li>
            <li>博客</li>
            <li>新闻</li>
        </ul>
    </nav>

    <p>页面内容...</p>

</body>
</html>

蟹黄汤包_

关注

5
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
【响应式】使用媒体查询实现响应式页面

* 媒体查询：当屏幕宽度小于576px时，不显示导航栏 */当屏幕宽度在1200px到992px之间时，导航栏变为4列。/* 媒体查询：当屏幕宽度小于1200px时，显示4列 */当屏幕宽度在992px到768px之间时，导航栏变为3列。当屏幕宽度在768px到576px之间时，导航栏变为2列。/* 媒体查询：当屏幕宽度小于992px时，显示3列 *//* 媒体查询：当屏幕宽度小于768px时，显示2列 */当屏幕宽度大于1200px时，默认显示8列。当屏幕宽度小于576px时，导航栏完全隐藏。
复制链接

扫一扫