CSS3多媒体查询

1 多媒体查询

1.1 响应式网页概念

同⼀个网页根据窗口大小的不同，显示不同的版式。

1.2 优缺点

优点：对于不同视⼝都可以显示⾮常饱满的⽹⻚结构，没有横向滚动条。

缺点：制作复杂，同时对于移动端⽽⾔，需要加载⾮常多的 pc 端的样式和图⽚等资源，影响加载速度，同时费流量。国内流量⾮常贵。（这也是国内纯响应式⽹站不多的原因。）

1.3 原理

媒体查询能在不同的条件下使⽤不同的样式，使⻚⾯在不同在终端设备下达到不同的渲染效果。

1.4 媒体设备

值	描述
all	用于所有多媒体类型设备
print	用于打印机
screen	用于电脑屏幕，平板，智能手机等。
speech	用于屏幕阅读器

比如：在屏幕显示与打印设备上不同的 CSS 效果

• media 媒体

• screen 屏幕

• min-width 最⼩值，视⼝⼤于或者等于该值加载这个 css

• max-width 最⼤值，视⼝⼩于或者等于该值加载这个 css

<style media="screen">
    h1 {
        font-size: 32px;
        color: #ff0000;
    }
</style>
<style media="print">
    h1 {
        font-size: 32px;
        color: #00ff00;
    }
</style>
<h1>www.yunhe.cn</h1>
<hr>
<h2>云和数据</h2>

多设备支持：可以⽤逗号分隔同时⽀持多个媒体设备

@import url(screen.css) screen,print;
<link href="screen.css" media="screen,print">
@media screen,print {...}

1.5 实现方式

1.5.1 外链式

在 link 标签中通过 media 属性可以设置样式使⽤的媒体设备。

• common.css 没有指定媒体所以全局应⽤

• screen.css 应⽤在屏幕设备

• print.css 应⽤在打印设备

<!-- 视⼝⼤于或者等于 1200px 加载 1.css-->
<link rel="stylesheet" type="text/css" href="css/01.css" media="screen and (min-width:1200px)">
<!-- 视⼝⼩于 1200px 加载 2.css -->
<link rel="stylesheet" type="text/css" href="css/02.css" media="screen and (max-width:1199px)">

注意：

• IE8 不兼容 media

• 简化代码，相同样式写在⼀起。

• 利⽤层叠性，写在后⾯。

1.5.2 导入式

使⽤ @import 可以引⼊指定设备的样式规则。⽂件中引⼊⼀个样式⽂件，在这个⽂件中再引⼊其他媒体的样式⽂件。

<link rel="stylesheet" href="style.css">

style.css

@import url(screen.css) screen;
@import url(print.css) print;

1.5.3 内嵌式

<style>
    /* 宽度大于等于 1200px */
    @media screen and (min-width: 1200px) {
        p {
            float: left;
            width: 50%;
            height: 200px;
            background-color: #ff0000;
        }
    }
​
    /* 宽度小于等于 1199px */
    @media screen and (max-width: 1199px) {
        p {
            float: left;
            width: 50%;
            height: 200px;
            background-color: #00ff00;
        }
    }
​
    /* 宽度大于等于 640px 小于等于 1000px */
    @media screen and (min-width: 640px) and (max-width: 1000px) {
        p {
            float: left;
            width: 50%;
            height: 200px;
            background-color: #0000ff;
        }
    }
</style>
<p></p>

1.6 设备方向

使⽤ orientation 属性可以定义设备的⽅向

值	描述
portrait	竖屏设备即⾼度⼤于宽度
landscape	横屏设备即高度小于宽度

<style media="screen and (min-width: 768px),screen and (orientation:landscape)">
    body {
        background: #ff0000;
    }
</style>

1.7 查询条件

可以使⽤不同条件限制使⽤的样式，条件表达式需要放在扩号中

1.7.1 逻辑与

需要满⾜多个条件时才使⽤样式，多个条件使⽤ and 连接。表示满足全部条件才能生效。

<style>
    /* 横屏显示且屏幕宽度不超过 600px */
    @media screen and (orientation: landscape) and (max-width : 600px) {
        body {
            background: #8e44ad;
        }
    }
</style>

1.7.2 逻辑或

多个 或 条件查询使⽤逗号连接，不像其他程序中使⽤ or 语法。表示只要满足其中一个条件就能生效。

<style>
    /* 横屏显示 或者 屏幕宽度不超过 600px */
    @media screen and (orientation: landscape),screen and (max-width : 600px) {
        body {
            background: #8e44ad;
        }
    }
</style>

1.7.3 不应用

not 表示不应⽤样式，即所有条件都满⾜时不应⽤样式。

注意：必须将 not 写在查询的最前⾯

<style>
    /* 横屏显示且屏幕宽度不超过 600px 时不应用当前样式 */
    @media not screen and (orientation: portrait) and (max-width:600px) {
        body {
            background: #8e44ad;
        }
    }
</style>

1.7.4 仅当前应用

only 指定某种特定的媒体类型，可以用来排除不支持媒体查询的浏览器。

<style>
    /* 仅电脑屏幕，平板，智能手机以及横屏显示且屏幕宽度不超过 600px 时应用当前样式 */
    @media only screen and (orientation: portrait) and (max-width:600px) {
        body {
            background: #8e44ad;
        }
    }
</style>

1.8 查询特性

根据查询特性筛选出使⽤样式的设备。

1.8.1 常⽤特性

特性	说明
orientation: landscape | portrait	landscape 横屏，portrait 竖屏
width	设备宽度
height	设备⾼度
min-width	最⼩宽度
max-width	最⼤宽度
min-height	最⼩⾼度
max-height	最⼤⾼度

1.8.2 使⽤示例

在设备宽度为 568px 时使⽤样式

@media only screen and (width:568px) {
  ... 
}

在设备不⼩于 569px 时使⽤样式

@media only screen and (min-width:569px) {
  ... 
}

橫屏设备并且宽度⼤于 569px 时使⽤样式

@media only screen and (orientation: landscape) and (min-width:569 px) {
  ... 
}