Fork me on GitHub

响应式布局

 

1 什么是媒体查询

媒体查询指的是获取设备屏幕、浏览器尺寸(width,height),进而为不同尺寸设定不同的CSS样式。一般而言,可以通过@media来获取屏幕或浏览器尺寸信息。@media的常用参数如下表所示:

<html>
    <head>
        <title>媒体查询</title>
        <style>
            @media screen and (min-device-width:100px) and (max-device-width:300px){
                body{
                    background-color: red;
                }
            }
            @media screen and (min-device-width:301px) and (max-device-width:500px){
                body{
                    background-color: blue;
                }
            }
        </style>
    </head>
    <body>
    </body>
</html>

根据浏览器尺寸修改页面背景色:当浏览器尺寸在300px到500px之间时,设置背景色为红色,当浏览器尺寸大于500时,设置背景色Wie红色。

<html>
    <head>
        <title>媒体查询</title>
        <style>
            @media screen and (min-width:300px) and (max-width:500px){
                body{
                    background-color: red;
                }
            }
            @media screen and (min-width:501px){
                body{
                    background-color: blue;
                }
            }
        </style>
    </head>
    <body>
    </body>
</html>

除了控制背景色之外,还可以控制排版布局,例如:三个div,超大屏幕则使3个div显示在一行,中型尺寸两行显示,小屏幕三行显示。

<html>
    <head>
        <title>媒体查询</title>
        <style>
            #div0{
                width: 100%;
                height: 500px;
            }
            #div0 div:nth-child(1){
                background-color: red;
            }
            #div0 div:nth-child(2){
                background-color: green;
            }
            #div0 div:nth-child(3){
                background-color: blue;
            }
            #div0 div{
                float: left;
                height:200px;
            }
            /* 1行3个div */
            @media screen and (min-device-width:601px){
                #div0 div{
                    width: 33.33%;
                }
            }
            /* 1行2个div */
            @media screen and (min-device-width:501px) and (max-device-width:601px){
                #div0 div{
                    width: 50%;
                }
            }
            /* 1行3个div */
            @media screen and (max-device-width:500px){
                #div0 div{
                    width: 100%;
                }
            }
        </style>
    </head>
    <body>
        <div id="div0">
            <div></div>
            <div></div>
            <div></div>
        </div>

    </body>
</html>

另外多说一点,通常配合视口与媒体查询一起使用,如下所示:

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0" >

其中,width=device-width定义了页面宽度为设备屏幕宽度;initial-scale=1.0设置初始显示宽度为原始比例,也就是1.0;user-scalable=0是禁用浏览器缩放。

2 引入媒体查询

2.1 方式一:在内部样式表中使用

方式一就是如上文中使用媒体查询一般,在一个内部样式表(style标签)中为不同的屏幕尺寸定义不同的样式,上文中已有多个示例演示,这里不再赘述。

2.2 方式二:在声明内部样式表时使用

方式二是在写style标签时,在声明标签时写明媒体查询,达到有条件地执行某个内部样式表的目的,使用方式如下:

<style media="(min-device-width:501px) and (max-device-width:601px)">
    body{
        background-color: blue;
    }
</style>

我们使用这种方式来改写上一章节中根据屏幕尺寸不同行显示div的例子:

<html>
    <head>
        <title>媒体查询</title>
        <style>
            #div0{
                width: 100%;
                height: 500px;
            }
            #div0 div:nth-child(1){
                background-color: red;
            }
            #div0 div:nth-child(2){
                background-color: green;
            }
            #div0 div:nth-child(3){
                background-color: blue;
            }
            #div0 div{
                float: left;
                height:200px;
            }
        </style>

        <style media="(min-device-width:601px) and (max-device-width:800px)">
            #div0 div{
                width: 33.33%;
            }
        </style>
        <style media="(min-device-width:501px) and (max-device-width:600px)">
            #div0 div{
                width: 50%;
            }
        </style>
        <style media="(max-device-width:500px)">
            #div0 div{
                width: 100%;
            }
        </style>

    </head>
    <body>
        <div id="div0">
            <div></div>
            <div></div>
            <div></div>
        </div>

    </body>
</html>

2.3 方式三:link标签引入外部样式文件

除了上述两种方式,也可以通过link标签写明media媒体查询条件,针对不同尺寸引入外部样式文件,引入方式如下:

<link href="css/index.css" rel="stylesheet" media="(min-device-width:100px) and (max-device-width:300px)">

继续改写上文3个div根据尺寸分行显示的例子,此次,我们需要新建多个CSS文件,文件名和内容如下:

public.css:无论哪种尺寸,都需要使用的样式

#div0{
    width: 100%;
    height: 500px;
}
#div0 div:nth-child(1){
    background-color: red;
}
#div0 div:nth-child(2){
    background-color: green;
}
#div0 div:nth-child(3){
    background-color: blue;
}
#div0 div{
    float: left;
    height:200px;
}

1.css:屏幕尺寸大于701px时使用的样式

#div0 div{
    width: 33.33%;
}

2.css:屏幕尺寸在501px到701px之间时使用的样式

#div0 div{
    width: 50%;
}

3.css:屏幕尺寸小于500px时使用的样式

#div0 div{
    width: 100%;
}

posted @ 2021-04-27 17:09  奥辰  阅读(112)  评论(0编辑  收藏  举报