对于移动端页面，有两种实现方案：
1, 网站PC端页面和移动端页面完全分开做，根据用户的访问设备类型，给用户返回不同的页面（目前国内大多数网站采用的都是此方案）。

2，响应式页面布局，页面本身能够根据浏览器窗口的宽度进行不同的布局，在宽屏幕上显示一种布局，在移动端窄屏幕上显示另一种布局。

分开做就是做两个完全不相同的页面,所以记一下媒体查询

媒体查询,响应式布局

像bootstrap这种框架都会有响应式布局的引入,但个人感觉有点不合胃口,所以还是自己写比较好

媒体查询是响应式页面的基础

@media，设置媒体查询，设置一些样式仅在某些条件下生效

下面这段代码的max-width:900px是网页宽度小于900px时,不是前面有max就是大于

@media (max-width:900px){
 }

Tips:媒体查询代码是遵循css优先级的，所以要放在css代码的最下面(个人觉得），css优先级具体看另一篇博客：css优先级

下面贴一个效果直观一点的代码,鼠标拉伸网页宽度,在网页宽度小于900时一个效果,小于600时另一个效果

<!DOCTYPE html>
<html lang="en">
<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">
    <title>Document</title>
    <style>
        body{
            margin: 0;
        }
        /*给main设置宽高,居中,弹性布局,为了直观的看到效果,不用在意*/
        main{
            width: 900px;
            margin: 0 auto;
            background-color: yellow;
            display: flex;
            flex-wrap: wrap;
        }
        /*给div设置25%宽度,主要看box排列效果*/
        .box{
            width: 25%;
            height: 50px;
            border: 1px solid #000;
            box-sizing: border-box;
        }
        
        /* @media，设置媒体查询，设置一些样式仅在某些条件下生效 */
        /* max-width:900px：当窗口宽度小于900px时 */
        /* 媒体查询是响应式页面的基础  */
        @media (max-width:900px){
            .box{
                width: 33.3%;
            }
            main{
                width: 600px;
            }
        }

        @media(max-width:600px){
            .box{
                width: 50%;
            }
            main{
                width: 3m00px;
            }
        }
    </style>
</head>
<body>
    <main>
        <div class="box">1</div>
        <div class="box">2</div>
        <div class="box">3</div>
        <div class="box">4</div>
        <div class="box">5</div>
        <div class="box">6</div>
        <div class="box">7</div>
        <div class="box">8</div>
        <div class="box">9</div>
        <div class="box">10</div>
        <div class="box">11</div>
        <div class="box">12</div>
        <div class="box">13</div>
        <div class="box">14</div>
        <div class="box">15</div>
    </main>
</body>
</html>

媒体查询,响应式页面

媒体查询,响应式布局

媒体查询是响应式页面的基础

猜你喜欢