简介

媒体查询(Media Queries)早在在css2时代就存在,经过css3的洗礼后变得更加强大bootstrap的响应式特性就是从此而来的.

简单的来讲媒体查询是一种用于修饰css何时起作用的语法.

Media Queries 的引入，其作用就是允许添加表达式用以确定媒体的环境情况，以此来应用不同的样式表。换句话说，其允许我们在不改变内容的情况下，改变页面的布局以精确适应不同的设备。(1)

既然媒体查询是用于控制样式的,而样式的使用无外乎如下几种规则:

  • 使用link引入
  • 使用style标签
  • 使用style属性
  • 使用@import引入

而显式的使用媒体查询声明样式我们有如下三种方法:

  • 使用link引入时使用media属性
  • 使用style标签时添加media属性
  • 在样式中使用条件规则组

我们先来看看link的使用方式:

link标签使用媒体查询后基本的样子如下(1):



<link rel="stylesheet" type="text/css" href="swordair.css" media="screen and (min-width: 400px)">

一旦使用了媒体查询修饰link标签后,就意味着符合媒体查询后这个样式就会被启用,同样的规则适用于style标签.

例子的解释

那么对于上面的那一句media="screen and (min-width: 400px)"就可以解释为:
当屏幕的宽度大于等于400px的时候应用这条样式规则.

媒体查询的三个部分

上面的例子中我们可以看到多出了一个media属性,而media中内容就是媒体查询的语法,可以被如下解释:

一个媒体查询由一个可选的媒体类型和零个或多个使用媒体功能的限制了样式表范围的表达式组成，例如宽度、高度和颜色。媒体查询，添加自CSS3，允许内容的呈现针对一个特定范围的输出设备而进行裁剪，而不必改变内容本身。(2)

看起来很复杂,但是实际上一个媒体查询的声明就分为以下三个部分:

  • 媒体类型 - 形容设备
  • 媒体特性(媒体特征/媒体功能) - 形容设备的状态
  • 逻辑操作符 - 连接多个规则

那么使用上方的例子来说media="screen and (min-width: 400px)"中screen就是媒体类型,
而后面的and被称作逻辑操作符,
(min-width: 400px)则被称作媒体特性.

媒体类型一览

上文说道媒体查询在css2中就已经有了,所以有很多媒体类型是在css2时代提出的,其中就只有screen和all被广泛的使用,有很多都被删除掉了.

  • 常使用的媒体类型css2制定

    • screen 主要适用于彩色的电脑屏幕
    • all 适用于所有设备 (媒体类型默认值)

  • 不常使用的媒体类型

    • print
    • speech

  • css2.1被废弃掉的媒体类型(3)

    • tty
    • tv
    • projection
    • handheld
    • braille
    • embossed
    • aura

常用的媒体特性

名称 特性
width 可视宽度
height 可视高度

媒体特性完整列表

媒体特性一览:

https://developer.mozilla.org...

媒体查询声明的详细规则

大家可以运行一下这个例子来感受一下:



<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width, initial-scale=1" />

    <style type="text/css">

        html,body{

            height: 100%;

        }

        body{

            background-color: aqua;

        }

    </style>

    <style media="screen and (min-width: 400px)">

        body{

            background-color: #000;

        }

    </style>

    <title>test</title>

</head>

<body>

</body>

</html>

在这个例子中屏幕宽度大于400像素的时候body的背景颜色是黑色,但是一旦低于400像素后就成为了青绿色.

一个媒体查询声明中可以由多个媒体查询组成(使用逗号分割),一个单独的规则是由如下的格式组成的:

类型 数量 默认值
媒体类型 0 / 1 all
媒体特性 n(n!=0)
逻辑操作符 n-1

也就是说一个媒体查询中可以存在多条规则,对于一个规则需要一个媒体类型(默认all)和n个媒体特性(可选),他们之间的连接使用逻辑操作符来连接.

当不填写媒体类型对应的默认规则:

  • (max-width:400px) = all and (max-width:400px)
  • (max-width:400px) and (min-width:200px) = all and (max-width:400px) and (min-width:200px)
  • (max-width:400px) , (min-width:200px) = all and (max-width:400px) , all and (min-width:200px)

媒体特性前缀

上面的例子的媒体查询有如下内容screen and (width: 400px)如果你看过媒体特性一览表就会发现min-这个内容是没有提到的.

大部分媒体特性都是有前缀的,媒体特性前缀主要用于约束媒体特性的作用范围.

  • max-xxx 小于指定的最大值返回true
  • min-xxx 大于指定的最小值返回true

逻辑操作符

所谓的逻辑操作符说白了就是编程中的逻辑操作符,用于连接多个媒体特性表达式.

显示的逻辑操作符一共有两个:

  • not 对于匹配到的媒体查询取反
  • and 只有连接的两个规则都成立的时候才返回true

注意:默认使用逗号分割的多个媒体查询就是or的写法,也就是说逗号就相当于or操作符

特殊的有一个:

  • only 不支持更加高级的媒体类型的浏览器检测到only修饰的时候就会抛弃这个规则

实际使用中然并卵的功能

具体例子及解释

例子1:



screen and (min-width: 400px)

宽度大于400像素的设备使用这个样式.

例子2:



(min-width: 700px) and (orientation: landscape)

宽度大于700像素且屏幕为横屏的时候使用这个样式.

例子3:



handheld and (max-width:20em), screen and (max-width:30em)

表示此CSS被应用于宽度小于20em的手持，或者宽度小于30em的屏幕.

条件规则组

所谓的条件规则组就是值媒体的声明不在link标签和style标签上,而是在css代码中,利用条件规则组我们可以将一块css代码在符合媒体查询的时候应用.

使用方式(BootStrap中的样式代码)



@media (min-width:768px) {

    .lead {

        font-size: 21px

    }

}

优先级

在这个例子中:



<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width, initial-scale=1" />

    <style type="text/css" media="screen and (min-width: 400px)">

        html,body{

            height: 100%;

        }

        body{

            background-color: aqua;

        }

        @media screen and (min-width: 400px){

            body{

                background-color: #000;

            }

        }

    </style>

    <title>test</title>

</head>

<body>

</body>

</html>

在style标签上声明的属性和在内部的条件规则组媒体查询设计的一致,但是内部的条件规则组覆盖掉了外部style上的媒体查询.

可以看到他们实际上它们之间没有优先级,只有先后执行的顺序,后执行的规则会覆盖掉前面的规则.

引用&参考

(1)

http://www.swordair.com/blog/...

(2)

https://developer.mozilla.org...

(3)

https://developer.mozilla.org...

https://developer.mozilla.org...

https://www.zhangxinxu.com/wo...

额外补充

更多的详细的例子:

http://www.cnblogs.com/lguow/...

使用媒体查询注意的常见错误:

https://blog.csdn.net/qq_3755...

电脑分辨率对应的媒体查询:

https://blog.csdn.net/happyde...

暗坑

在写例子的时候我使用到了两个浏览器最新的firefox和最新的chrome,有趣的事情是二者在style标签上使用media属性表现不同.

firefox中不写<meta name="viewport" content="width=device-width, initial-scale=1" />也是正常运行,但是chrome就不可以.

原文地址：https://segmentfault.com/a/1190000016895772

详解css媒体查询的更多相关文章

  1. 使用 CSS 媒体查询创建响应式网站

    简介 现今每天都有更多的手机和平板电脑问市.消费者能够拥有可想象到的各种规格和形状的设备,但是网站开发人员却面临一个挑战:如何使他们的网站在传统浏览器.手机和平板电脑浏览器上有很好的效果,如何在各种大 ...

  2. css媒体查询：响应式网站

    css媒体查询:响应式网站 媒体查询 包含了一个媒体类型和至少一个使用如宽度.高度和颜色等媒体属性来限制样式表范围的表达式.CSS3加入的媒体查询使得无需修改内容便可以使样式应用于某些特定的设备范围. ...

  3. MySQL简单查询详解-单表查询

    MySQL简单查询详解-单表查询 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.查询的执行路径 一条SQL查询语句的执行过程大致如下图所示: 1>.客户端和服务端通过my ...

  4. CSS 媒体查询创建响应式网站

    使用 CSS 媒体查询创建响应式网站  适用于所有屏幕大小的设计 固定宽度的静态网站很快被灵活的响应式设计所取代,该设计可以根据屏幕大小进行上扩和下扩.利用响应式设计,无论您采用什么设备或屏幕来访问网 ...

  5. 纯CSS + 媒体查询实现网页导航特效

    纯css+媒体查询实现网页导航特效 附上效果图: 代码如下,复制即可使用: <!DOCTYPE html> <html lang="en"> <hea ...

  6. 巧妙使用CSS媒体查询(Media Queries)和JavaScript判断浏览器设备类型的好方法

    有无数的理由要求我们在任何时候都应该知道用户是使用的什么设备浏览我们的网站——宽屏,普通屏,平板,手机?知道这些特征,我们web应用的CSS和JavaScript才能同步做相应的操作.在给Mozill ...

  7. 详解CSS float属性

    CSS中的float属性是一个频繁用到的属性,对于初学者来说,如果没有理解好浮动的意义和表现出来的特性,在使用的使用很容易陷入困惑,云里雾里,搞不清楚状态.本文将从最基本的知识开始说起,谈谈关于浮动的 ...

  8. CSS学习笔记（9）--详解CSS中:nth-child的用法

    详解CSS中:nth-child的用法 前端的哥们想必都接触过css中一个神奇的玩意,可以轻松选取你想要的标签并给与修改添加样式,是不是很给力,它就是“:nth-child”. 下面我将用几个典型的实 ...

  9. 详解CSS的相对定位和绝对定位（讲得很详细）

    详解CSS的相对定位和绝对定位 CSS的相对定位和绝对定位通常情况下,我们元素的position属性的值默认为static 就是没有定位,元素出现在正常的文档流中,,这个时候你给这个元素设置的left ...

随机推荐

  1. H - F(x)

    #include <iostream> #include <algorithm> #include <cstring> #include <cstdio> ...

  2. 常用HTTP协议响应码（转载）

    转载于: https://blog.csdn.net/github_36032947/article/details/78343734 HTTP响应码,也称http状态码(HTTP Status Co ...

  3. dzzoffice 任意文件下载漏洞分析

    dzzoffice 任意文件下载 \updload\dzz\system\save.php第72行开始:    elseif($_GET['do']=='move'){    $obz=trim($_ ...

  4. 洛谷P2473||bzoj1076 [SCOI2008]奖励关

    https://www.luogu.org/problemnew/show/P2473 https://www.lydsy.com/JudgeOnline/problem.php?id=1076 不会 ...

  5. JAVA常用知识总结（十三）——数据库（三）

    Mysql的主键选择(主键自增,UUID,snowflake)? 使用自增长做主键的优点:1.很小的数据存储空间2.性能最好3.容易记忆使用自增长做主键的缺点:1.如果存在大量的数据,可能会超出自增长 ...

  6. NUP2201MR

    NUP2201MR:双总线保护IC(瞬态抑制二极管),常用于USB总线的保护.

  7. python学习之环境搭建 输入输出

    一 环境搭建: 在安装好python2.7之后就可以利用其命令行和交互式模式进行基本的输入和输出测试了,但这样编码无法保存,所以就需要用到好用的编辑器和环境搭建了,这里用uestdio. 1.1打开u ...

  8. Linux 批量杀进程的命令

    使用awk批量杀进程的命令: ps -ef | grep firefox | grep -v grep | awk '{print "kill -9 "$2}'|sh #列出了当前 ...

  9. 142. O(1)时间检测2的幂次

    用 O(1) 时间检测整数 n 是否是 2 的幂次. 您在真实的面试中是否遇到过这个题? Yes 样例 n=4,返回 true; n=5,返回 false. class Solution { publ ...

  10. [android][windows][使用HAXM加速模拟器][不使用SDK manager]

    网上找到了来使用HAXM,可惜我在sdk manager上下载不了,也使用过勾上[fetching...]那个选项,依然无效. 所以自己手动下载来安装和使用. 具体的教程可以参考http://blog ...