html-css 15媒体查询美图的导航条

木一叶liuyue

已于 2022-03-18 21:47:35 修改

阅读量537

点赞数

分类专栏：前段文章标签： css 媒体 css3

于 2022-03-18 11:13:30 首次发布

本文链接：https://blog.csdn.net/kerryliuyue/article/details/123570015

版权

前段专栏收录该内容

47 篇文章 0 订阅

订阅专栏

本文介绍了媒体查询的使用，包括如何针对不同设备和窗口大小设置样式，实现响应式布局。通过设置媒体特性如width、height等，可以创建断点，使网页在手机、平板和桌面等不同设备上呈现最佳效果。此外，示例还展示了如何在实际网页设计中应用媒体查询，如在美图网站的顶部导航栏设计中，利用媒体查询实现不同屏幕尺寸下的布局切换。

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

媒体查询

<!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>
</head>

<style>
    /*使用媒体查询 
    语法: @media 查询规则{}
    媒体类型: all所有设备
    print 打印设备
    screen带屏幕的设备

    可以使用连接多个媒体类型，这样他们之间就是一个或的关系
    可以在媒体类型前添加一个only，表示只有 
    only的使用主要是为了兼容一些老版本的浏览器
    */
    /* @media print,screen{
        body{
           background-color: antiquewhite; 
        }
    } */

    @media only screen{
        body{
            background-color: aquamarine;
        }
    }
</style>

<body>
    <!-- 响应式布局
    网页可以根部不同的设备或窗口大小呈现出不同的效果
    使用响应式布局。可以使一个网页适应于所有设备
    相应布局的关键就是 媒体查询
    通过媒体查询，可以为不同的设备，或设备不同状态来分别设置样式
    -->
</body>
</html>

媒体特性

<!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>
</head>
<style>
    /* 媒体特性:
    width:视口的宽度
    height:视口的高度
max-width:视口最大宽度
    min-width:视口最小宽度
    */
        /*样式切换的分界点
        我们称为断点
        小于768，超小屏幕 max-width=768px
        大小768  小屏幕
        大于992 中型屏幕
        大于1200 大屏幕 min-width=1220px
        and是交集
        ，是并集
        */
    @media(min-width:500px)and(max-width:700px) {
        body{
            /*当视口宽度大于500px,样式生效*/
            background-color: antiquewhite;
        }
    }
</style>

<body>
    
</body>
</html>

美图html

<!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>美图</title>
    <link rel="stylesheet" href="../css重置样式表/reset.css">
    <!-- 这个地方记住，一定是引入的css文件 -->
    <link rel="stylesheet" href="./css/syntax.css">
    <link rel="stylesheet" href="../font/css/all.css">
</head>
<style>

</style>

<body>
    <div class="topbar-wrapper">
    <!-- 设置顶部容器 -->
    <div class="topbar">
        <!-- 设置左侧菜单导航 -->
        <div class="left-menu">
            <ul class="menu-icon">
                <!-- 图标不能实现动画，所以用另外一种方法 -->
                <li></li>
                <li></li>
                <li></li>
            </ul>
            <ul class="nav">
                <li><a href="javascript:;">手机</a></li>
                <li><a href="javascript:;">美容仪器</a></li>
                <li><a href="javascript:;">配件</a></li>
                <li><a href="javascript:;">服务支持</a></li>
                <li><a href="javascript:;">企业网站</a></li>
                <li><a href="javascript:;"><i class="fas fa-search"></i></a>
                <span>搜索Meitu.com</span>
                </li>
            </ul>
        </div>
        <!-- 设置中间logo -->

        <div class="logo"><a href="#">tupian</a></div>
        <!-- 设置右侧用户信息 -->
        <div class="user-info">
            <a href="javascript:;"><i class="fas fa-user"></i></a>
        </div>
    </div>
</div>
</body>

</html>

美图less



a{
    color: #fff;
    &:hover{
        color: rgb(197, 190, 190);
    }
}
.topbar-wrapper{
    background-color: #161515;
}

//设置美图
.topbar{
//下面这两句，是为了在最后放大的时候的效果，最大宽度是1200px,并且居中
    max-width: 1200px;
    margin: 0 auto;


   width: 100%;
    height: 48px;
    background-color: black;
    color:white;
    padding: 0 14px;
// 让三个元素浮动起来
display: flex;
justify-content: space-between;
}

.left-menu {
//设置菜单

    .nav{
//把这个下拉框隐藏起来，
display: none;


        top:48px;
        //这个时候nav是相对于html(左上角）定位胆
        position: absolute;
        background-color: black;
        //如何让这个框撑满整个父元素呢
        //根据等式，左右都为0，不设置宽度，中间就是auto，自动给撑满了
        left: 0;
        right:0;
        //上下也是，中间是auto，自动撑满
        bottom: 0;
//这个地方不能让Tops是50，那样会留白
            padding-top: 60px;
            li{
                width: 80%;
                margin: 0 auto;
                border-bottom: 1px solid #161515;
                a{
                    display: block;
                   
                    line-height: 44px;
                    font-size: 14px;
                   
                }
                &:last-child a{
                    display: inline-block;
                    margin-right: 6px;
                }
            }
           

    }


    //图标
    .menu-icon{
        width: 18px;
        height: 48px;
        // background-color: #bfa;
        //开启相对定位，可以设置三条线的位置
        position: relative;
        //设置左侧导航
        li{
            width: 18px;
            height: 1px;
            background-color: white;
            //现在三条线在顶部
            position: absolute;
            //修改旋转中心，由中心改为左侧
            transform-origin: left center;
            transition: 0.5s;
        }
        //导航的三条线
        li:nth-child(1){
            top:18px;
          
        }
        li:nth-child(2){
            top:24px;
           
        }
        li:nth-child(3){
            top:30px;
           
        }
    //鼠标移入左侧导航的效果，正常项目，效果是通过js实现
    &:hover{

        li:nth-child(1){
            
            //向下旋转
            transform: rotateZ(40deg);
        }
        li:nth-child(2){
          
            //隐藏
          
            // visibility: hidden;
        //   或者把颜色变成透明，我觉得下面这个效果比上面好
           opacity: 0;
        }
        li:nth-child(3){
        
            transform:rotateZ(-40deg);
        }



    }


    }

    
   //把隐藏的下拉框移出来
   &:hover{
       //显示隐藏的菜单
    .nav{
        display: block;
    }

   }
   
}

.logo{
    a{
        //怎么把字隐藏起来
        text-indent: -999px;
        display: block;
        height: 44px;
        width: 160px;
        background-image: url(../picture/meitu.png);
    // background-color: red;
    background-size: 160px 44px;
    }
}

.user-info i{
    font-size: 18px;
  padding-top: 13px;
  color: aqua;
}
//设置媒体查询
@media only screen {
    //断点 768px(和and那种写法是一样的)
    @media (min-width:768px) {
        .left-menu{
        //自动增长
        flex:auto;

            order: 2;
            .nav{
                display: block;
                //为了让菜单位置合适，我们把定位关了
                position: static;
                //让菜单横过来
                display: flex;
                padding: 0;//让它回到上面
                li{
                    width: auto;
                    border-bottom: none;

                    a{
                        line-height: 48px;
                    }
                    span{
                        display: none;
                    }
                }
            }
            //当宽度变大，我们进行调整，只将图标隐藏
            .menu-icon{
                display: none;
            }
        }
        .logo{
            order: 1;
            
        }
        .user-info{
            order: 3;
        }
    }
}

木一叶liuyue

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
html-css 15媒体查询美图的导航条

媒体查询<!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&g
复制链接

扫一扫