文章目录
  1. 1. 前言
  2. 2. 视口
    1. 2.1. 屏幕适配
  3. 3. 媒体查询
  4. 4. Bootstrap 的响应源码
    1. 4.1. container
    2. 4.2. display
  5. 5. Response 分析
    1. 5.1. header
    2. 5.2. masthead 报头
    3. 5.3. social 社交
    4. 5.4. projects
      1. 5.4.1. header
      2. 5.4.2. projects 区域
    5. 5.5. footer

前言

bootstrap 响应式布局用的不熟,在网上找了现成的 bootstrap 响应单页很多,在这里通过分析一个bootstrap中文网主页的响应来分析响应式布局的原理,从此畅通,以后专注写 media…

前往:Bootstrap 中文网

视口

获取 viewport 的大小(布局视口)

获取 layout viewport

1
2
document.documentElement.clientWidth;
document.documentElement.clientHeight;

ideal viewport(理想视口)设备屏幕区域

1
2
3
4
5
6
7
8
9
// 获取ideal viewport有两种情形

// 新设备
window.screen.width;
window.screen.height;

// 老设备
window.screen.width / window.devicePixelRatio;
window.screen.height / window.devicePixelRatio;

移动设备厂商认为将网页完整显示给用户才最合理,而不该出现滚动条,所以就将 layout viewport 进行了缩放,使其恰好完整显示在 ideal viewport(屏幕)里,其缩放比例为 ideal viewport / layout viewport。

屏幕适配

移动页面最理想的状态是,避免滚动条且不被默认缩放处理

viewport 是由苹果公司为了解决移动设备浏览器渲染页面而提出的解决方案

  • 控制缩放
1
<meta name="viewport" content="width=device-width, initial-scale=1.0" />

媒体查询

引入方法

  1. link 方法
1
<link href="index.css" media="only screen and (max-width: 320px)" />
  1. media(css 样式)
1
2
@media screen and (min-width: 768px) and (max-width: 979px) {
}
  • 关键字

关键字将媒体类型或多个媒体特性连接到一起做为媒体查询的条件。

关键字 含义
and 将多个媒体特性连接起来,相当于”且”
not 排除某个媒体类型,相当于”非”,可以省略
only 指定某个特定的媒体类型,可以省略
  • 常用特性
属性 含义
width / height 完全等于 layout viewport
max-width / max-height 小于等于 layout viewport
min-width / min-height 大于等于 layout viewport
device-width / device-height 完全等于 ideal viewport

Bootstrap 的响应源码

container

每个布局的大容器都在使用了.container这个 class 类名,保证所有设备 padding 和 margin 的同时候,保证响应设备的宽度控制。

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
/*最小设备以及公共padding与margin的控制*/
.container {
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}

@media (min-width: 768px) {
.container {
width: 750px;
}
}

@media (min-width: 992px) {
.container {
width: 970px;
}
}

@media (min-width: 1200px) {
.container {
width: 1170px;
}
}

display

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
@media (max-width: 767px) {
.hidden-xs {
display: none !important;
}
}
/*当尺寸大于等于768px和小于等于991px时*/
@media (min-width: 768px) and (max-width: 991px) {
.hidden-sm {
display: none !important;
}
}
@media (min-width: 992px) and (max-width: 1199px) {
.hidden-md {
display: none !important;
}
}
@media (min-width: 1200px) {
.hidden-lg {
display: none !important;
}
}

Response 分析

以 Bootstrap 中文网为例子,进一步完善媒体查询对响应式布局的功用。

我的 PC 设备是 1366x768,在这里选择@media (min-width: 1200px)的情况进行兼容,匹配 PC 设备

  1. 使用hidden-sm hidden-md两个 class 类控制,当屏幕尺寸大于 768px 和小于等于 1119 时候,隐藏Bootstrap2 中文文档
1
2
3
4
5
6
7
8
9
10
@media (min-width: 992px) and (max-width: 1199px) {
.hidden-md {
display: none !important;
}
}
@media (min-width: 768px) and (max-width: 991px) {
.hidden-sm {
display: none !important;
}
}
1
2
3
<li class="hidden-sm hidden-md">
<a href="https://v2.bootcss.com/" target="_blank">Bootstrap2中文文档</a>
</li>
  1. 当屏幕尺寸大于 768px 和小于等于 991px 的时,使用.hidden-sm控制 header 左侧的Bootstrap 中文网隐藏,控制右侧的关于隐藏。
1
2
3
4
5
<a class="navbar-brand hidden-sm">Bootstrap中文网</a>
...
<ul class="nav navbar-nav navbar-right hidden-sm">
<li><a>关于</a></li>
</ul>
  1. 当屏幕尺寸小于 768px 时,nav-toggle不再控制菜单的隐藏状态,显示出来,header 的各个子菜单,由collapse控制隐藏,同时改变了 nav 里面的 li 标签的布局方式(不设浮动),变成树状态。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
@media (min-width: 768px) {
.navbar-toggle {
display: none;
}
}
@media (min-width: 768px) {
.navbar-collapse.collapse {
display: block !important;
height: auto !important;
padding-bottom: 0;
overflow: visible !important;
}
}

@media (min-width: 768px) {
.navbar-nav {
float: left;
margin: 0;
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<div class="navbar-collapse collapse" role="navigation">
<ul class="nav navbar-nav">
<li class="hidden-sm hidden-md">
<a href="https://v2.bootcss.com/">Bootstrap2中文文档</a>
</li>
<li>
<a href="https://v3.bootcss.com/">Bootstrap3中文文档</a>
</li>
...
</ul>
<ul class="nav navbar-nav navbar-right hidden-sm">
<li>
<a href="/about/">关于</a>
</li>
</ul>
</div>

masthead 报头

masthead 模块的响应主要是包含块 container 和居中text-align:center的结果,当然需要下面的 css 控制 h1 和 h2 的大小响应。

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
@media screen and (min-width: 768px) {
.masthead {
padding: 90px 0 110px;
}
}

.masthead h1 {
font-size: 60px;
line-height: 1;
letter-spacing: -2px;
font-weight: 700;
}

@media screen and (min-width: 768px) {
.masthead h1 {
font-size: 90px;
}
}

@media screen and (min-width: 992px) {
.masthead h1 {
font-size: 100px;
}
}

.masthead h2 {
font-size: 18px;
font-weight: 200;
line-height: 1.25;
}

@media screen and (min-width: 768px) {
.masthead h2 {
font-size: 24px;
}
}

@media screen and (min-width: 992px) {
.masthead h2 {
font-size: 30px;
}
}

social 社交

下面是布局的简化版本,主要利用了text-algn:centercontainer:

css 样式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
* {
box-sizing: border-box;
}

.text-align {
text-align: center;
}

.container {
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}

.social-forum,
.social-weibo {
display: inline-block;
}

html 布局

1
2
3
4
5
6
7
8
9
10
<div class="container text-align">
<ul class="bc-social-buttons">
<li class="social-forum">
Bootstrap问答社区
</li>
<li class="social-weibo">
新浪微博:@Bootstrap中文网
</li>
</ul>
</div>

projects

header

首先是包裹 header 的容器projects-header,使用百分比布局居中适应,保证容器内部的响应.

1
2
3
4
5
6
7
8
9
10
.projects-header {
width: 60%;
text-align: center;
margin: 60px 0 10px;
font-weight: 200;
margin-bottom: 40px;
display: block;
margin-left: auto;
margin-right: auto;
}

header 内部使用 h2 标签包裹的标题Bootstrap相关优质项目推荐,设置了响应,当在大于 768px 的时候字体大小为 42px,小于 768px 的时候更改为 30px;

1
2
3
4
5
6
7
8
9
10
.projects-header h2 {
font-size: 30px;
letter-spacing: -1px;
}

@media screen and (min-width: 768px) {
.projects-header h2 {
font-size: 42px;
}
}

projects 区域

先说著名的 12 栅格布局,当屏幕大于1200px像素的时候使用col-lg-3将宽分为每份 25%,这里的 3 指的是 12 份取其中的 3 份,就是 1/4;当屏幕尺寸介于992px-1200px之间,使用col-md-4将宽度分成 3 份,每份占 1/3;当屏幕尺寸介于768px-992px之间时,使用col-sm-6,将屏幕分成 2 份(都是在只使用单一的分法时),当屏幕尺寸小于 768px 的时候不再栅格,使用默认的样式控制左右 padding 向中间挤压.

由于采用border-box布局,上述栅格系统通过默认加入的左右 padding 15px 像素可以控制间隔。

1
2
3
4
5
6
7
8
9
10
11
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
*:before,
*:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
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
@media (min-width: 1200px) {
.col-lg-3 {
width: 25%;
}
}
@media (min-width: 1200px)
.col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9 {
float: left;
@media (min-width: 992px) {
.col-md-4 {
width: 33.33333333%;
}
}
@media (min-width: 992px) {
.col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9 {
float: left;
}
}
@media (min-width: 768px) {
.col-sm-6 {
width: 50%;
}
}
/*左右距离控制*/
@media (min-width: 768px) {
.col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9 {
float: left;
}
.col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-xs-1, .col-xs-10, .col-xs-11, .col-xs-12, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9 {
position: relative;
min-height: 1px;
padding-right: 15px;
padding-left: 15px;
}
}

按照 footer 结构的布局,没有 css 样式的时候是上下结构布局,移动端响应比较好,在大设备上需要左右布局,这时候的栅格布局结构大致如下面的情况。

在大于 768px 设备上面,将右侧的公司结构目录再次分成 12 份的布局结构,小于 768px 像素的时候这些拆分栅格失效,还保留了公共的 padding 来控制间隔距离,设计不可谓不妙。

下面的footer-bottom结构基本与上面的 social 模块一样,不再赘述了…

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
<footer class="footer ">
<div class="container">
<div class="row footer-top">
<div class="col-md-6 col-lg-6">
<h4>
<img
src="https://assets.bootcss.com/www/assets/img/logo.png?1528519874373"
/>
</h4>
<p>我们一直致力于为广大开发者提供更多的优质技术文档和辅助开发工具!</p>
</div>
<div class="col-md-6 col-lg-5 col-lg-offset-1">
<div class="row about">
<div class="col-sm-3">
<h4>关于</h4>
<ul class="list-unstyled">
li*4 ...
</ul>
</div>
<div class="col-sm-3">
<h4>联系方式</h4>
<ul class="list-unstyled">
li*2 ...
</ul>
</div>
<div class="col-sm-4">
<h4>旗下网站</h4>
<ul class="list-unstyled">
li*5 ...
</ul>
</div>
<div class="col-sm-2">
<h4>赞助商</h4>
<ul class="list-unstyled">
li ...
</ul>
</div>
</div>
</div>
</div>
<hr />
<div class="row footer-bottom">
<ul class="list-inline text-center">
<li>
<a href="http://www.miibeian.gov.cn/" target="_blank"
>京ICP备11008151号</a
>
</li>
<li>京公网安备11010802014853</li>
</ul>
</div>
</div>
</footer>
文章目录
  1. 1. 前言
  2. 2. 视口
    1. 2.1. 屏幕适配
  3. 3. 媒体查询
  4. 4. Bootstrap 的响应源码
    1. 4.1. container
    2. 4.2. display
  5. 5. Response 分析
    1. 5.1. header
    2. 5.2. masthead 报头
    3. 5.3. social 社交
    4. 5.4. projects
      1. 5.4.1. header
      2. 5.4.2. projects 区域
    5. 5.5. footer