CSS3——media query和响应式布局

旧城等待， 2023-07-03 07:10 1阅读 0赞

# 一.media query #

针对不同的媒体设备screen，进行匹配，提供精准的控制,也可对媒体分辨率、色深等进行匹配

### 1.语法：@media not|only 设备类型 \[and 设备特性\]\* ###

其中 \[and 设备特性\]可以出现无数次，可以对多个设备特性进行匹配  
不管是电脑、手机还是平板都对应于screen设备

###### 一般情况下格式为：@media screen and （设备特性）\{…\} ######

### 2.针对浏览器宽度响应式布局 ###

分别是.html文件和.css文件，用于表示浏览器宽度大于1000px、大于480px小于1000px、小于480px时的效果。

点击黄色区域（按f12或右键查看元素），可以修改浏览器宽度高度，同时查看页面变化的效果  
![在这里插入图片描述][20200203223255796.jpg]

<!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>media</title>
        <link rel="stylesheet" href="text.css">
    </head>
    <body>
        <div id="container">
            <div id="left">
                <h2>hhhhhh</h2>
                hhhhhh1
            </div>
            <div id="main">
                <h2>llllll</h2>
                 lllllllll2
            </div>
            <div id="right">
                <h2>dddddd</h2>
                ddddddd3
            </div>
        </div>   
    </body>
    </html>

#container{ 
        text-align:center;
        margin:auto;
        width:750px;
    }
    #container>div{ 
        border:1px solid #aaf;
        text-align: left;
        /*设置html元素的大小和边框*/
        box-sizing:border-box;
        border-radius:12px 12px 0px 0px;
        padding:5px;
    }
    div#left{ 
        width:300px;
        float:left;
        height:260px;
    }
    div#main{ 
        width:460px;
        float: left;
        height:260px;
        /*让该元素的右边不能出现float*/
        clear:right;
    }
    div#right{ 
        width:750px;
        float: left;
    }
    @media screen and (min-width:1000px){ 
        #container{ 
            text-align:center;
            margin:auto;
            width:960px;
        }
        #container>div{ 
            border:1px solid #aaf;
            box-sizing:border-box;
            border-radius:12px 12px 0px 0px;
            padding:5px;
        }
        div#left{ 
            width:240px;
            float:left;
            height:260px;
        }
        div#main{ 
            width:460px;
            float: left;
            height:260px;
            clear:none;
        }
        div#right{ 
            width:260px;
            float: left;
            height: 260px;
        }
    }
    
    @media screen and (max-width:480px){ 
        #container{ 
            text-align:center;
            margin:auto;
            width:450px;
        }
        #container>div{ 
            border:1px solid #aaf;
            box-sizing:border-box;
            border-radius:12px 12px 0px 0px;
            padding:5px;
        }
        div#left{ 
            width:450px;
            float:left;
            height:150px;
        }
        div#main{ 
            width:450px;
            float: left;
            height:260px;
            clear:none;
        }
        div#right{ 
            width:450px;
            float: left;
            height: 170px;
        }
    }

### 3.响应手机浏览器 ###

加入如下代码，可以将浏览器宽度设置与手机屏幕宽度一致（content="width=device-width）、initial-scale=1.0为页面缩放比例为1.0

[20200203223255796.jpg]: https://img-blog.csdnimg.cn/20200203223255796.jpg