响应式设计
CSS5 分钟 读完 (大约 786 个字)

响应式设计

总结一下css的响应式设计。

可视区域

viewport是页面的可视区域。

针对移动端优化：

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

user-scalable ：用户是否可以手动缩放。

网格视图

响应式网格视图一半是12cols，宽度100%，自动伸缩。

创建响应式网格：

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
<style>* {
    box-sizing: border-box;
}

.header {
    border: 1px solid red;
    padding: 15px;
}

.menu {
    width: 25%;
    float: left;
    padding: 15px;
    border: 1px solid red;
}

.main {
    width: 75%;
    float: left;
    padding: 15px;
    border: 1px solid red;
}

</style></head><body><div class="header"><h1>Chania</h1></div><div class="menu"><ul><li>The Flight</li><li>The City</li><li>The Island</li><li>The Food</li></ul></div><div class="main"><h1>The City</h1><p>Chania is the capital of the Chania region on the island of Crete. The city can be divided in two parts,
the old town and the modern city.</p><p>Resize the browser window to see how the content respond to the resizing.</p></div></body>

一列对应8.33%的宽度。

创建不同宽度对应的class：

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
.col-1 {
    width: 8.33%;
}

.col-2 {
    width: 16.66%;
}

.col-3 {
    width: 25%;
}

.col-4 {
    width: 33.33%;
}

.col-5 {
    width: 41.66%;
}

.col-6 {
    width: 50%;
}

.col-7 {
    width: 58.33%;
}

.col-8 {
    width: 66.66%;
}

.col-9 {
    width: 75%;
}

.col-10 {
    width: 83.33%;
}

.col-11 {
    width: 91.66%;
}

.col-12 {
    width: 100%;
}

所有的列左浮动：

1
2
3
4
5
[class*="col-"] {
    float: left;
    padding: 15px;
    border: 1px solid red;
}

每一行使用div包裹：

1
2
3
4
<div class="row">
    <div class="col-3">...</div>
    <div class="col-9">...</div>
</div>

清除浮动：

1
2
3
4
5
.row:after {
    content: "";
    clear: both;
    display: block;
}

媒体查询

例子：

1
2
3
4
5
@media only screen and (max-width: 500px) {
    body {
        background-color: lightblue;
    }
}

添加断点：为不同的设备添加断点以判断设备。

  • 桌面端优先
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
/* 桌面端样式 */
.col-1 {
    width: 8.33%;
}

.col-2 {
    width: 16.66%;
}

.col-3 {
    width: 25%;
}

.col-4 {
    width: 33.33%;
}

.col-5 {
    width: 41.66%;
}

.col-6 {
    width: 50%;
}

.col-7 {
    width: 58.33%;
}

.col-8 {
    width: 66.66%;
}

.col-9 {
    width: 75%;
}

.col-10 {
    width: 83.33%;
}

.col-11 {
    width: 91.66%;
}

.col-12 {
    width: 100%;
}

@media only screen and (max-width: 768px) {

    /* 移动端样式 */
    [class*="col-"] {
        width: 100%;
    }
}
  • 移动端优先
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
/* 移动端样式 */
[class*="col-"] {
    width: 100%;
}

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

    /* 桌面端样式 */
    .col-1 {
        width: 8.33%;
    }

    .col-2 {
        width: 16.66%;
    }

    .col-3 {
        width: 25%;
    }

    .col-4 {
        width: 33.33%;
    }

    .col-5 {
        width: 41.66%;
    }

    .col-6 {
        width: 50%;
    }

    .col-7 {
        width: 58.33%;
    }

    .col-8 {
        width: 66.66%;
    }

    .col-9 {
        width: 75%;
    }

    .col-10 {
        width: 83.33%;
    }

    .col-11 {
        width: 91.66%;
    }

    .col-12 {
        width: 100%;
    }
}
  • 移动端、pad、桌面端兼容
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
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
/* 手机端样式 */
[class*="col-"] {
    width: 100%;
}

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

    /* pad样式 */
    .col-m-1 {
        width: 8.33%;
    }

    .col-m-2 {
        width: 16.66%;
    }

    .col-m-3 {
        width: 25%;
    }

    .col-m-4 {
        width: 33.33%;
    }

    .col-m-5 {
        width: 41.66%;
    }

    .col-m-6 {
        width: 50%;
    }

    .col-m-7 {
        width: 58.33%;
    }

    .col-m-8 {
        width: 66.66%;
    }

    .col-m-9 {
        width: 75%;
    }

    .col-m-10 {
        width: 83.33%;
    }

    .col-m-11 {
        width: 91.66%;
    }

    .col-m-12 {
        width: 100%;
    }
}

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

    /* 桌面端样式 */
    .col-1 {
        width: 8.33%;
    }

    .col-2 {
        width: 16.66%;
    }

    .col-3 {
        width: 25%;
    }

    .col-4 {
        width: 33.33%;
    }

    .col-5 {
        width: 41.66%;
    }

    .col-6 {
        width: 50%;
    }

    .col-7 {
        width: 58.33%;
    }

    .col-8 {
        width: 66.66%;
    }

    .col-9 {
        width: 75%;
    }

    .col-10 {
        width: 83.33%;
    }

    .col-11 {
        width: 91.66%;
    }

    .col-12 {
        width: 100%;
    }
}

查询横竖屏：横屏landscape、竖屏portrait。

1
2
3
4
5
@media only screen and (orientation: landscape) {
    body {
        background-color: lightblue;
    }
}

响应式图片

<img> 图片：

  • width属性设置为100%，配合max-width避免图片放大。
  • 或者直接使用max-width设置为100%，效果同上。

背景图片：

背景图片可以相应式的调整大小和缩放，有下面三种方法。

  1. background-size 属性设置为 “contain”，按比例自适应缩放。
  2. background-size 属性设置为 “100% 100%”，拉伸充满整个元素。
  3. background-size 属性设置为 “cover”，按比例拉伸直到充满整个元素。

使用媒体查询让不同的设备显示不同的图片：

1
2
3
4
5
6
7
8
9
body {
    background-image: url('img_smallflower.jpg');
}

@media only screen and (min-width: 400px) {
    body {
        background-image: url('img_flowers.jpg');
    }
}

可以使用min-device-width替代min-width。

还可以使用html5的 <picture> 元素为不同的设备提供不同的图片，该元素类似于video和audio。

1
2
3
4
5
<picture>
    <source srcset="img_smallflower.jpg" media="(max-width: 400px)">
    <source srcset="img_flowers.jpg">
    <img src="img_flowers.jpg" alt="Flowers">
</picture>

响应式视频

  • 使用max-width
1
2
3
4
video {
    max-width: 100%;
    height: auto;
}
  • 自动填充容器
1
2
3
4
video {
    width: 100%;
    height: auto;
}

框架

使用bootstrap快速创建响应式布局。

例子：

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
<head>
    <link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.4/css/bootstrap.min.css">
    <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <script src="http://apps.bdimg.com/libs/bootstrap/3.3.4/js/bootstrap.min.js"></script>
</head>

<body>

    <div class="container">
        <div class="jumbotron">
            <h1>我的第一个 Bootstrap 页面</h1>
        </div>
        <div class="row">
            <div class="col-sm-4">
                ...
            </div>
            <div class="col-sm-4">
                ...
            </div>
            <div class="col-sm-4">
                ...
            </div>
        </div>
    </div>

</body>

</html>

喜欢这篇文章？打赏一下作者吧

评论

关注我

链接

分类

最新文章

归档

标签

二分查找1
二叉树1
二维数组1
动态规划2
双指针1
字符串1
排序1
数学1
数组3
树1
递归2
链表2

订阅更新

×