HTML媒体查询

最新推荐文章于 2024-06-28 17:35:49 发布

2764150442

最新推荐文章于 2024-06-28 17:35:49 发布

阅读量2k

点赞数 1

分类专栏：媒体查询文章标签： html css 前端

本文链接：https://blog.csdn.net/weixin_70815247/article/details/125797390

版权

媒体查询专栏收录该内容

1 篇文章 0 订阅

订阅专栏

本文介绍如何使用CSS的overflow, display: inline-block, 和 media queries（针对600px及以下屏幕）来创建一个响应式的导航栏。同时，通过伪类选择器实现首字高亮效果，适合不同设备的显示需求。

摘要由CSDN通过智能技术生成

重点：

溢出隐藏（css样式）：

overflow: hidden;

行内块标签（css样式）：

display: inline-block;

媒体查询（使用@media来查询）：

这里我设置的最大宽度是600px（max-width:600px）

定义输出设备中页面最大可见区域的宽度

也可以设置最小宽度 min-width：600px

定义输出设备中页面最小可见区域的宽度

@media screen and (max-width:600px){

}

其他：

这里我用到伪类选择器：

：first-child(选择到第一个a标签)

.nav a:first-child{
            
        }

:hover（第一个a标签，鼠标指针浮动在上边实线效果）

a:not(:first-child):hover{
            
        }

CSS样式：

<style>
        *{
            margin: 0;
            padding: 0;
        }
        .nav-box{
            overflow: hidden;
            width: 100%;
            height: 40px;
            background-color: rgb(178, 255, 127);
        }
        .nav{
            width: 1000px;
            margin: 0 auto;
        }
        .nav a{
            text-align: center;
            display: inline-block;
            text-decoration: none;
            width: 150px;
            height: 40px;
            line-height: 40px;
            color: #ffffff;
        }
        .nav a:first-child{
            font-size: 18px;
            font-weight: bold;
            margin-right: 20px;
        }
        a:not(:first-child):hover{
            background-color: aquamarine;
            color: black;
        }
        @media screen and (max-width:600px){
            .nav a{
                float: left;
                width: 100%;
                text-align: left;
                padding-left: 20px;
            }
            .nav{
            width: 100%;
            }
            .nav-box{
                height: 300px;
            }
        }
    </style>

body正文

<body>
    <div class="nav-box">
        <div class="nav">
            <a href="#">HOME</a>
            <a href="#">网站首页</a>
            <a href="#">关于我们</a>
            <a href="#">新闻资讯</a>
            <a href="#">联系方式</a>
        </div>
    </div>
</body>

效果图：

正常：

缩小后：

总结：

使用@media主要作用：
        (1)使用 @media查询,可以针对不同的媒体类型定义不同的样式;
        (2)@media 可以针对不同的屏幕尺寸设置不同的样式;
        (3)当重置浏览器大小的过程中,页面也会根据浏览器的宽度和高度重新渲染页面;
        (4)目前针对很多苹果手机、 Android手机 ,平板等设备都用得到多媒体查询.