Media query 详解

关注

原创最新推荐文章于 2026-09-22 20:15:59 发布 1.6w 阅读 AI 写同款· GEO 优化 ›

响应式布局基本实现Media Query（媒介查询） Media Query的使用方法、设备类型、设备特性、特殊情况、在bootstrap中的应用... 阅读详情

最近更新文章不及时,在此说声抱歉,关于 media query 在网络上实际已经有很多成型的文章,但是在编者查看之后,发现并没有特别基础的入门教程,所以今天上午特意去对知识进行了整理,于是就有了下面的这篇文章,希望在阅读过这篇文章之后,能够帮助到你,感谢.

��5月24是作者的生日呦,希望大家多多留言点赞!��

0.前言

很多时候,前期使用 HTML 和 CSS 设计的样式非常精美,但是经常会因为对方的设备,浏览器等的原因,分辨率达不到要求,最后导致用户看到的界面非常丑陋,很多内容位置发生改变.

为了解决这个问题,,从 CSS 2.1 开始就定义了各种媒体类型(如显示器,便携浏览器等),允许设计者针对不用的媒体设备进行不同的 CSS 样式设计.

1.语法

语法规则如下:

@media not|only 设备类型 [and 设备特性] *

在上面的语法中,[and 设备特性] 部分可以出现 0 ~ N 次,通过使用多个 [and 设备特性] 可以对多个设备特性进行匹配.

media query 语法格式中支持设备如下:

-	-
all	适用于所有的设备
aural	适用于语音和音频合成器
braille	适用于触觉反馈设备
embossed	适用于凸点文字(盲文)印刷设备
handheld	适用于小型或者手提设备
print	适用于打印机
projection	适用于投影图像,如幻灯片
sceen	适用于计算机显示器(最常用的一个)
tty	适用于使用固定间距字符格的设备,如电传打字机和终端.
tv	适用于电视类设备

media query 语法格式中设备特性如下:

特性	合理的特性值	是否支持 max/min	说明
width	带单位的长度值,如100px	是	匹配浏览器宽度
height	带单位的长度值,如100px	是	匹配浏览器高度
aspect-ratio	比例值,如 16/9	是	匹配浏览器的宽度值和高度值的比例
device-width	带单位的长度值,如100px	是	匹配设备分辨率的宽度值
device-height	带单位的长度值,如100px	是	匹配设备分辨率的高度值
device-aspect-ratio	比例值,如 16/9	是	匹配设备分辨率的宽度值与高度值的比例
color	整数值	是	匹配设备使用多少位的色深,比如真彩色是32,如果不是彩色设备则为 0
color-index	整数值	是	匹配色彩表中的颜色数
monochrome	整数值	是	匹配单色帧缓冲器中每像素的位(bit)数,如果不是单色设备,这个数值为 0
resolution	分辨率,如300dpi	是	匹配设备的物理分辨率
scan	只能是 progressive 或者 interlace	否	匹配设备的扫描方式,其中 progressive 代表逐行扫描, interlace 代表隔行扫描
grid	只能是 0 或 1	否	匹配设备是否基于栅格,1代表基于栅格,0代表其他类型

我们发现是不是很牛 X ,几乎设备所有物理特性我们都可以获取到,这样我们是不是也可以根据我们获取到的特性的内容,我们可以去针对不同的内容去进行设置了?那我们现在就根据上面的特性来去做几个简单的例子.

2.示例

首先我们先来看一个基础案例,就是我们通过我们改变浏览器的大小,来让我们浏览器中的文字也随之变化,给用户一种,我们的界面内容是可以随着浏览器的改变而改变的感觉.

2.1 案例一

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style>
            html,body {
                height:100%;
            }
            html{font-size:10px}
            h2 {
                font-size:1.9rem;
            }
            /*媒体查询*/
            @media screen and (min-width:321px) and (max-width:375px){
            html{font-size:11px}}
            @media screen and (min-width:376px) and (max-width:414px){
            html{font-size:12px}}
            @media screen and (min-width:415px) and (max-width:639px){
            html{font-size:15px}}
            @media screen and (min-width:640px) and (max-width:719px){
            html{font-size:20px}}
            @media screen and (min-width:720px) and (max-width:749px){
            html{font-size:22.5px}}
            @media screen and (min-width:750px) and (max-width:799px){
            html{font-size:23.5px}}
            @media screen and (min-width:800px){html{font-size:25px}}
        </style>
    </head>
    <body>
        <div>
            <h2>我是李先生</h2>
            <span>李鹏</span>
            <span>2016年05月24日</span>
        </div>
    </body>
    </html>

大家可以看到,我在代码中首先获取的设备类型是我们的屏幕.

之后我们通过 and 设备特性对不同情况下的文字大小进行了修改,如下图.

@media screen and (min-width:321px) and (max-width:375px){
html{font-size:11px}}

2.2 案例二

让我们的网页中的内容结构随着我们的界面大小而不断改变,具体样例如下:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style type="text/css">
            /*设置默认的 CSS 样式*/
            .container{
                text-align: center;
                margin: 10px auto;
                width: 750px;
            }
            .container>div{
                border: 1px solid rgba(0,0,0,0.3);
                text-align: left;
                /*设置 HTML 组件的 width 属性包括边框*/
                box-sizing: border-box;
                background-color: #96FF6B;
                padding: 5px;
            }
            div .left{
                width: 300px;
                height: 230px;
                float: left;
            }
            div .main{
                width: 450px;
                height: 230px;
                float: left;
                /*这里不采用 clearfix 的用法了,直接 clear */
                clear:right;
            }
            div .right{
                width: 750px;
                float: left;
            }

            @media screen and (min-width: 1000px){
                .container{
                text-align: center;
                margin: 10px auto;
                width: 960px;
                }
                .container>div{
                    border: 1px solid rgba(0,0,0,0.3);
                    /*设置 HTML 组件的 width 属性包括边框*/
                    box-sizing: border-box;
                    background-color: #96FF6B;
                    padding: 5px;
                }
                div .left{
                    width: 240px;
                    height: 240px;
                    float: left;
                }
                div .main{
                    width: 460px;
                    height: 240px;
                    float: left;
                }
                div .right{
                    width: 260px;
                    height: 240px;
                    float: left;
                }
            }
            @media screen and (min-width: 180px) and (max-width: 500px){
                .container{
                text-align: center;
                margin: 10px auto;
                width: 450px;
                }
                .container>div{
                    border: 1px solid rgba(0,0,0,0.3);
                    /*设置 HTML 组件的 width 属性包括边框*/
                    box-sizing: border-box;
                    background-color: #96FF6B;
                    padding: 5px;
                }
                div .left{
                    width: 450px;
                    height: 240px;
                    float: left;
                }
                div .main{
                    width: 450px;
                    height: 240px;
                    float: left;
                }
                div .right{
                    width: 450px;
                    height: 240px;
                    float: left;
                }
            }
        </style>
    </head>
    <body>
        <div class="container">
            <div class="left">
                <h2>我是你们的李先生呀</h2>
                <ul>
                    <li>MR_LP</li>
                    <li>MR_LP</li>
                    <li>MR_LP</li>
                    <li>MR_LP</li>
                </ul>
            </div>

            <div class="main">
                <h2>我是你们的李先生呀</h2>
                <p>MR_LP MR_LP MR_LP MR_LP MR_LP MR_LP MR_LP MR_LP MR_LP MR_LP MR_LP MR_LP MR_LP MR_LP MR_LP MR_LP MR_LP MR_LP MR_LP MR_LP MR_LP MR_LP MR_LP MR_LP MR_LP MR_LP MR_LP MR_LP MR_LP MR_LP MR_LP MR_LP</p>
            </div>

            <div class="right">
                <h2>我是你们的李先生呀</h2>
                <ul>
                    <li>MR_LP</li>
                    <li>MR_LP</li>
                    <li>MR_LP</li>
                    <li>MR_LP</li>
                </ul>
            </div>
        </div>
    </body>
    </html>