媒体查询实现页面适配问题_媒体适配1024-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_40833779/article/details/90477490

通常的网络页面都会应对浏览器实际页面大小去做一些页面布局的适配，今天小编通过一个demo来实现一个简单的导航栏以及内容的适配，就是通过查询页面实际宽度来做一个响应式的布局

一、视口

首先我们了解一下视口这个概念，视口在pc端就等于浏览器实际页面宽度，移动端视口默认是厂家所定义的一个固定值。简单来讲媒体查询是基于视口宽度去做的一个判断，然后对应的去改变模块样式。

  <!-- 这样的一行代码会使手机端视口根据其手机实际宽度来定义视口大小 -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

二、媒体查询demo

语法
这边案例就代表视口宽度在830px到1024时对应发生的变化

@media (min-width: 830px) and (max-width: 1024px){
      /* 条件下样式的修改 */
}

demo展示
这边小编直接展示一下基本的适配demo，然后代码会放在最后面大家也可以看一下。
demo说明： 一般的浏览器适当缩小，为了更好的体验会有一个布局的适配。

全屏显示：

页面适当缩小：
在这里插入图片描述
最后手机端的一个适配(列表栏收缩隐藏按钮点击显示)：

代码如下：

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="header.css">
    <title>适配pc与手机</title>
</head>
<body>
    <!-- 头部导航栏 -->
    <div class="header">
        <div class="centre">
            <div class="logo">
                <a href="" style="display:block; padding: 30px 60px ;overflow: hidden; background-color: gray"></a>
            </div>
            <div class="nav-list" id="navList">
                <span class="line"></span>
                <span class="line"></span>
                <span class="line"></span>
            </div>
            <div class="navigation" id="navbox">
                <nav>
                    <ul>
                        <li class="active"><a href="">首页</a></li>
                        <li><a href="">首页</a></li>
                        <li><a href="">首页</a></li>
                        <li><a href="">首页</a></li>
                        <li><a href="">首页</a></li>
                    </ul>
                </nav>
            </div>
        </div>
    </div>
    <div class="content">
        <article class="text">文章内容</article>
        <article class="text">文章内容</article>
        <article class="text">文章内容</article>
        <article class="text">文章内容</article>
        <article class="text">文章内容</article>
        <article class="text">文章内容</article>
        <article class="text">文章内容</article>
        <article class="text">文章内容</article>
    </div>
    <script type="text/javascript" src="adaptive.js"></script>
</body>

let navList = document.getElementById('navList');
let navbox = document.getElementById('navbox');
let choose = true;
navList.addEventListener('click',function(){
    if(choose){
        navbox.classList.add('navigationheight');
        choose = false;
    }
    else{
        navbox.classList.remove('navigationheight');
        choose = true;
    }
},false);

*{
    margin: 0;
    padding: 0;
}
a{
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-style: inherit;
    font-family: inherit;
    font-size: 100%;
    vertical-align: baseline;
    text-decoration: none;
    color: black;
}
article{
    display: block;
}
ol,ul{
    list-style: none;
}
/* 头部整体 */
.header{
    height: 60px;
    width: 100%;
}
/* 页面实体区域 */
.centre{
    overflow: hidden;
    width: 990px;
    margin: 0 auto;
}
/* 页面logo */
.header .centre .logo{
    float: left;
}
.nav-list{
    margin-top: 26px;
    margin-right: 2px;  
    float: right;
    padding: 6px;
}
.line{
    margin: 2px 0;
    display: block;
    width: 12px;
    height: 2px;
    background-color: #6190e8;
}
/* nav栏 */
nav{
    float: left;
    padding-left: 50px;
}
nav ul li{
    float: left;
    height: 100%;
    line-height: 60px;
    font-size: 16px;
    margin: 0 10px;
    position: relative;
}
/* 导航列表上的3条蓝色线条类 */
.nav-list{
    display: none;
}
nav ul li.active::before{
    content: ' ';
    position: absolute;
    height: 3px;
    width: 100%;
    background-color: #6190e8; 
}
nav ul li a{
    display: block;
    height: 100%;
    padding: 0 15px;
}
/* 内容区域 */
.content{
    width: 990px;
    margin: auto;
    display: flex; 
    flex-wrap: wrap; 
}
.text{
    width: 200px;
    height: 100px;
    background-color: skyblue;
    float: left;
    text-align: center;
    margin:0 15px 20px 0;
}

/* 像素小于1024px时改变 */
@media (min-width: 830px) and (max-width: 1024px){
    /* 中心区域自适应满屏 */
    .centre{
        width: 880px;
        margin: 0 auto;
    }
    .content{
        width: 880px;
        margin: 0 auto;
    }
    .text{
        width: 250px;
        height: 200px;
    }
}

/* 手机端适配 */
@media (max-width: 829px){
    .content{
        display: block;
        width: 100%;
    }
    .text{
        float: none;
        width: auto;
        height: auto;
        line-height: 200px;
        margin: 0 0 10px 0;
    }
    .centre{
        width: 100%;
    }
    /* 显示导航列表按钮 */
    .nav-list{
        display: block;
    }
    /* 隐藏手机端nav栏需点击打开 */
    .navigation{ 
        width: 100%;
        /* 高度设0溢出隐藏实现 */
        overflow: hidden;
        height: 0;
        position: absolute;
        margin-top: 60px;
        background-color: rgba(255, 255, 255, 0.5);
        transition: height .5s;
    }
    .navigationheight{
        height: 210px;
    }
    nav{
        padding: 0;
    }
    nav ul li{
        float: none;
        margin-bottom: 15px; 
        height: 30px;
        line-height: 30px;
    }
    nav ul li.active::before{
        content: ' ';
        height: 100%;
        width: 2px;
        background-color: #6190e8; 
    }
}