媒体查询

Media Queries能在不同的条件下使用不同的样式，使页面在不同在终端设备下达到不同的渲染效果

viewport

手机是在电脑后出现的，早期网页设置没有考虑到手机的存在。把一个电脑端访问的网页拿到手机上浏览，我们需要告诉手机该怎么做

我们不能让手机浏览器使用PC端的分辨率来展示网页，这会让高分辨率的手机上造成文字过小

使用viewport可以将手机物理分辨率合理转为浏览器分辨率

viewport是虚拟窗口，虚拟窗口大于手机的屏幕尺寸。手机端浏览器将网页放在这个大的虚拟窗口中，我们就可以通过拖动屏幕看到网页的其他部分

但有时需要控制viewport虚拟窗口的尺寸或初始的大小，比如希望viewport完全和屏幕尺寸一样宽。就需要学习viewport的知识

媒体设备

下面是常用媒体类型，当然主要使用的还是screen

属性值作用
all所有媒体类型
screen用于电脑屏幕，平板电脑，智能手机等
print打印设备
speech应用于屏幕阅读器等发声设备

注：tty, tv, projection, handheld, braille, embossed, aural 设备类型已经被废弃

  • 可以使用 link 与 style 中定义媒体查询
  • 也可以使用 @import url(screen.css) screen 形式媒体使用的样式
  • 可以用逗号分隔同时支持多个媒体设备
  • 未指定媒体设备时等同于all

style

下面是在屏幕显示与打印设备上不同的CSS效果

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>主页</title>
    <style media="screen">
        h1 {
            font-size: 3em;
            color: blue;
        }
    </style>
    <style media="print">
        h1 {
            font-size: 8em;
            color: red;
        }

        hr {
            display: none;
        }
    </style>
</head>

<body>
    <h1>你好，陈若</h1>
    <hr>
</body>

</html>

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

  • common.css 没有指定媒体所以全局应用
  • screen.css 应用在屏幕设备
  • print.css 应用在打印设备
1
2
3
4
5
6
7
8
9
10
11
12
13
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>主页</title>
    <link rel="stylesheet" href="common.css">
    <link rel="stylesheet" href="screen.css" media="screen">
    <link rel="stylesheet" href="print.css" media="print">
</head>

<body>
    <h1>hello.world</h1>
    <hr>
</body>

common.css

1
2
3
h1 {
    outline: solid 5px #e74c3c;
}

screen.css

1
2
3
4
h1 {
    font-size: 3em;
    color: blue;
}
1
2
3
4
5
6
7
8
h1 {
    font-size: 8em;
    color: red;
}

h2,hr {
    display: none;
}

@import

使用@import 可以引入指定设备的样式规则。文件中引入一个样式文件，在这个文件中再引入其他媒体的样式文件

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

style.css

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

具体的 screen.css 与 print.css 与上面介绍的一样，在这里就不重复罗列了

@media

可以使用 @media 做到更细的控制，即在一个样式表中为多个媒体设备定义样式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>主页</title>
    <style>
        @media screen {
            h1 {
                font-size: 3em;
                color: blue;
            }
        }

        @media print {
            h1 {
                font-size: 8em;
                color: red;
            }

            h2,
            hr {
                display: none;
            }
        }
    </style>
</head>

<body>
    <h1>你好</h1>
    <hr>
    <h2>陈若</h2>
</body>

</html>

多设备支持

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

1
2
3
4
5
@import url(screen.css) screen,print;

<link rel="stylesheet" href="screen.css" media="screen,print">
 
@media screen,print {...}

设备方向

使用 orientation 属性可以定义设备的方向

属性值作用
portrait竖屏设备即高度大于宽度
landscape横屏设备即宽度大于高度

下面是尺寸小于768px或是横屏时使用蓝色字体

1
2
3
4
5
6
<style media="screen and (min-width: 768px),screen and (orientation:landscape)">
  body {
    color: blue;
  }
</style>
<h1>陈若</h1>

查询条件

可以使用不同条件限制使用的样式

  • 条件表达式需要放在扩号中

逻辑与

需要满足多个条件时才使用样式，多个条件使用and 连接。下例中满足以下要求才使用样式

  • 横屏显示
  • 宽度不能超过600px
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>主页</title>
    <style>
        @media screen and (orientation: landscape) and (max-width: 600px) {
            body {
                background: #8e44ad;
            }

            h1 {
                font-size: 3em;
                color: white;
            }
        }
    </style>
</head>

<body>
    <h1>陈若</h1>
</body>

</html>

逻辑或

多个或 条件查询使用逗号连接，不像其他程序中使用 or 语法

下面的示例中如果设备是横屏显示或宽度不超600px时就使用样式规则

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<html>

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>主页</title>
        <style>
            @media screen and (orientation: landscape),
            screen and (max-width: 600px) {
                body {
                    background: #8e44ad;
                }
    
                h1 {
                    font-size: 3em;
                    color: white;
                }
            }
        </style>
    </head>
    
    <body>
        <h1>陈若</h1>
    </body>

</html>

不应用

not 表示不应用样式，即所有条件都满足时不应用样式

必须将not写在查询的最前面

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>主页</title>
        <style>
            @media not screen and (orientation: landscape) and (max-width:600px) {
                body {
                    background: #8e44ad;
                }
    
                h1 {
                    font-size: 3em;
                    color: white;
                }
            }
        </style>
    </head>
    
    <body>
        <h1>陈若</h1>
    </body>

</html>

only

用来排除不支持媒体查询的浏览器

  • 对支持媒体查询的设备，正常调用样式，此时就当only不存在
  • 对不支持媒体查询的设备不使用样式
  • only 和 not 一样只能出现在媒体查询的开始
1
2
3
@media only screen and (orientation: landscape) and (max-width: 600px) {
	...
}

查询特性

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

常用特性

特性作用
orientation: landscape |portraitlandscape是横屏，portrait是竖屏
width设备宽度
height设备高度
min-width最小宽度
max-width最大宽度
min-height最小高度
max-height最大高度

案例

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

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

在设备不小于 569px时使用样式

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

橫屏设备并且宽度大于569px时使用样式

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

响应式布局

定义：网页可以根据不同的设备或窗口大小展现出不同的效果

关键：媒体查询(可以为不同的设备，或设备不同状态来分别设置样式)

语法

1
2
3
@media  属性值 {

}

属性值

  • all:所有设备
  • print:打印设备
  • screen:带屏幕的设备
  • speech:屏幕阅读器
  • 可以使用，连续多个媒体类型，这样它们之间就是一个或的关系

可以在属性值前添加一个only，表示只有

  • 作用：为了兼容老的浏览器

媒体特性

  • width:视口的宽度
  • height:视口的高度
  • min-width:视口的最小宽度(视口大于指定宽度时生效)
  • max-width:视口的最大宽度(视口小于指定宽度时生效)
  • min-height:视口的最小高度(视口大于指定高度时生效)
  • max-height:视口的最大高度(视口小于指定高度时生效)