网站响应式设计-JXin的博客

温馨提示

该文章距离上次更新已经过去了 956 天，文章内容可能已经过时。

什么是响应式设计？
媒体查询

什么是响应式设计？

响应式指的是一套代码能够在不同的设备下有着不一样的表现

例如：星巴克的官网就是一个响应式的设计

PC端：

移动端：

可以看到在PC端和移动端页面的表现是不一样的，页面的布局等发生了改变

响应式设计能通过一套代码就能解决PC、平板和手机等不同设备的各种布局，在刚推出的时候是非常火的，但是响应式布局也是有缺点的：

代码冗余：由于在各种设备使用的都是一套代码，就会出现一些代码是PC端特有的，一些是移动端特有的，例如上面提到的星巴克官网，移动端底部有一行导航栏，这在PC端是没有的，这就会出现代码的冗余，虽然这些冗余的代码不显示，但是在网站加载的时候都会被加载，这还会影响网页的加载速度
PC端和移动端的差异性：随着PC端和移动端的差异越来越大，使用一套代码就会感到力不从心
兼容性问题：响应式设计依托的是CSS3中的媒体查询，一些旧版本的浏览器可能不支持

媒体查询

响应式设计依托的是CSS3中的媒体查询，所谓媒体查询，就是根据一个或者多个基于设备类型、具体特点和环境来应用样式

媒体类型

媒体类型包括以下几种：

all：所有设备
print：打印机设备
screen：彩色的电脑屏幕
speech：听觉设备（内容以语音的方式呈现）

媒体类型默认为all

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title>媒体类型</title>
    <style>
      * {
        padding: 0;
        margin: 0;
      }

      /* 所有设备 */
      @media all {
        div {
          width: 300px;
          height: 300px;
          background-color: blue;
        }
      }

      /* 打印机设备 */
      @media print {
        div {
          background-color: green;
        }
      }

      /* 彩色的电脑屏幕 */
      @media screen {
        div {
          background-color: red;
        }
      }

      /* 听觉设备 */
      @media speech {
        div {
          background-color: salmon;
        }
      }
    </style>
  </head>
  <body>
    <div></div>
  </body>
</html>

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
36
37
38
39
40
41
42
43
44
45
46
47

媒体特性

媒体特性就是在确定了设备的情况下，再根据细分条件进行分类

width：宽度
min-width：最小宽度（宽度比这个值大的时候）
height：高度
max-width：最大宽度（宽度比这个值小的时候）
orientation：方向
- landscape：宽度大于高度（横屏）
- portrait：高度大于宽度（竖屏）
aspect-ratio：宽高比
-webkit-device-pixel-ratio：像素比（webkit内核私有的属性）

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title>媒体特性</title>
    <style>
      * {
        padding: 0;
        margin: 0;
      }

      div {
        width: 300px;
        height: 300px;
        background-color: blue;
      }

      /* 宽度为800px时 */
      @media (width: 800px) {
        div {
          background-color: red;
        }
      }

      /* 高度为800px时 */
      @media (height: 300px) {
        div {
          background-color: salmon;
        }
      }

      /* 宽度大于等于800px时 */
      @media (min-width: 800px) {
        div {
          background-color: green;
        }
      }

      /* 宽度小于等于800px时 */
      @media (max-width: 800px) {
        div {
          background-color: wheat;
        }
      }

      /* 宽度大于高度（横屏） */
      @media (orientation: landscape) {
        div {
          background-color: pink;
        }
      }

      /* 高度大于宽度（竖屏） */
      @media (orientation: portrait) {
        div {
          background-color: orange;
        }
      }

      /* 宽高比为2/1时 */
      @media (aspect-ratio: 2/1) {
        div {
          background-color: orangered;
        }
      }

      /* 像素比（DPR）为2时 */
      @media (-webkit-device-pixel-ratio: 2) {
        div {
          background-color: teal;
        }
      }
    </style>
  </head>
  <body>
    <div></div>
  </body>
</html>

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
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79

逻辑运算符

媒体查询中，还支持逻辑运算符

and（并且）：合并多个媒体类型
，号（或者）：只需要匹配其中某个媒体查询
not：对媒体查询取反
only：仅在媒体查询匹配成功后应用样式

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title>逻辑运算符</title>
    <style>
      * {
        padding: 0;
        margin: 0;
      }

      div {
        width: 300px;
        height: 300px;
        background-color: blue;
      }

      /* 宽度大于等于800px且小于等于900px时 */
      @media (max-width: 900px) and (min-width: 800px) {
        div {
          background-color: red;
        }
      }

      /* 宽度大于等于800px或者小于等于700px时 */
      @media (max-width: 700px), (min-width: 800px) {
        div {
          background-color: salmon;
        }
      }

      /* 宽度大于等于701px时 */
      @media not (max-width: 700px) {
        div {
          background-color: cadetblue;
        }
      }

      /* 宽度小于等于800px且在彩色屏幕时 */
      @media only screen and (max-width: 800px) {
        div {
          background-color: wheat;
        }
      }
    </style>
  </head>
  <body>
    <div></div>
  </body>
</html>

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
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51

外部引入媒体查询

使用link标签引入：

<link rel="stylesheet" href="200.css" media="(min-width: 200px)" />
<link rel="stylesheet" href="400.css" media="(min-width: 400px)" />
<link rel="stylesheet" href="600.css" media="(min-width: 600px)" />

1
2
3

使用import引入：

<style>
	@import url("200.css")(min-width: 200px);
	@import url("400.css")(min-width: 400px);
	@import url("600.css")(min-width: 600px);
</style>

1
2
3
4
5