# 响应计算
通过本章的学习来掌握开发中针对不同尺寸设备的响应式处理。
# [#](https://doc.houdunren.com/系统课程/css/16 响应尺寸.html#viewport)viewport
移动端浏览器将网页放置在虚拟的 viewport 中，不同手机分辨率对视口进行缩放即可全屏显示内容。不同浏览器定义的 viewport 尺寸不同。
# [#](https://doc.houdunren.com/系统课程/css/16 响应尺寸.html#视口概念)视口概念
所以 viewport 也可以理解为屏幕有多少像素来显示内容，这和电脑端是不同的。
- 电脑端是显示器的多大分辨率多少就用多少像素来显示
- 移动端是 viewport 分辨率多少就用多少像素来显示
- viewport 是可以改变的，就像显示器的分辨率可以改变一样
# [#](https://doc.houdunren.com/系统课程/css/16 响应尺寸.html#查看尺寸)查看尺寸
主流浏览器的默认 viewport 大小（因为浏览器间不统一，所以也没有必要关注下面的尺寸，只做为了解就行）
| 浏览器 | 尺寸 |
|---|---|
| Safari iPhone | 980px |
| Opera | 850px |
| Android WebKit | 800px |
| IE | 974px |
可以在控制台查看到 viewport 大小
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
</head>
<body>
后盾人十年来我们录制了大量制作精良的课程，并且依然在不段迭代更新中，首先感谢老朋友们十年来的支持，也欢迎新朋友们观看我们的视频教程。
</body>
</html>
2
3
4
5
6
7
8
9
在浏览器打开上面网页，并通过控制台查看结果如下
# [#](https://doc.houdunren.com/系统课程/css/16 响应尺寸.html#改变视口)改变视口
使用<meta name="viewport" content="width=2000px" />可以调整视口，这有点像设置相同尺寸桌面显示不同的分辨率。
下面是将视口定义为 2000 与 300 的差别，这类似于同样 27 寸分辨率下 4K 与 1080 显示的区别。
# [#](https://doc.houdunren.com/系统课程/css/16 响应尺寸.html#媒体查询)媒体查询
@media 是根据分辨率来响应式布局的，所以 viewport 尺寸的不同将影响媒体查询的使用。
下面代码用于在分辨率小于 500px 时更改内容颜色，但是因为没有设置 viewport，而使用浏览器默认的视口，这会造成在手机上无法进行响应操作，因为 viewport 尺寸大于 500px。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
</head>
<body>
<style>
@media (max-width: 500px) {
body {
color: red;
}
}
</style>
后盾人十年来我们录制了大量制作精良的课程，并且依然在不段迭代更新中，首先感谢老朋友们十年来的支持，也欢迎新朋友们观看我们的视频教程。
</body>
</html>
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
面当我们设置好 viewport 后就可以进行响应处理了，下面是将 viewport 设置为 500px
<meta name="viewport" content="width=500"/>
# [#](https://doc.houdunren.com/系统课程/css/16 响应尺寸.html#设备尺寸)设备尺寸
像上面通过人为设置像素值，显示是不可取的。如果响应布局当然希望 viewport 与设备尺寸一至，可喜的是，系统为我们提供了device-width变量值用于识别设备宽度。
<meta name="viewport" content="width=device-width" />
# [#](https://doc.houdunren.com/系统课程/css/16 响应尺寸.html#其他属性)其他属性
下面介绍其他可用在 meta 标签上的属性
| 属性 | 说明 |
|---|---|
| initial-scale=1 | 初始缩放比例 |
| minimum-scale=.5 | 允许用户最小缩放比例 |
| maximum-scale=2.5 | 允许用户最大缩放比例 |
| user-scalable=yes | 是否允许用户绽放 |
mac 用户在 chrome 中使用 option+shift+鼠标按住移动进行缩放
# [#](https://doc.houdunren.com/系统课程/css/16 响应尺寸.html#js-延迟)JS 延迟
设置 user-scalable=no 时可以 js 解决 300 延迟的问题，你也可以理解为当设置 user-scalable=yes 时，系统要识别两只手指，所以要有个宽容时间。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=yes" />
</head>
<body>
<style>
body {
width: 100vw;
height: 100vh;
}
</style>
<script>
let i = 1
document.body.addEventListener('click', () => console.log(i++))
</script>
</body>
</html>
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
# [#](https://doc.houdunren.com/系统课程/css/16 响应尺寸.html#rem-em)rem/em
em 理解为继承（相对）单位，它需要一个参考的继承属性。
# [#](https://doc.houdunren.com/系统课程/css/16 响应尺寸.html#em)em
我们知道字体大小是可以继承的，我们对下面例子进行说明
- span 没有设置字体大小，将继续父级 article 标签定义的大小 15px
- strong 定义了 2em 字体大小，因为使用了 em 单位即是父级 15px X 2=30px
可以通过 edge 或 chrome 浏览器调试工具的已计算标签查看
<style>
article {
font-size: 15px;
}
strong {
font-size: 2em;
}
</style>
<article>
<span>houdunren.com</span>
<strong>后盾人</strong>
</article>
2
3
4
5
6
7
8
9
10
11
12
13
# [#](https://doc.houdunren.com/系统课程/css/16 响应尺寸.html#多级继承)多级继承
下面代码是多层次的嵌套，如果使用 em 单位定义 font-size 会向上一直查找定义了 font-size 的父级来进行计算。直到找到 html 标签为止。
所以下面的 strong 定义的 2em 计算结果依然是 30px 即 article 标签的 font-size:15px 乘以 2。
<style>
article {
font-size: 15px;
}
strong {
font-size: 2em;
}
</style>
<article>
<div>
<span>houdunren.com</span>
<strong>后盾人</strong>
</div>
</article>
2
3
4
5
6
7
8
9
10
11
12
13
14
15
# [#](https://doc.houdunren.com/系统课程/css/16 响应尺寸.html#padding-margin)padding/margin
font-size 本身是可以继承的，所以 em 参考父级元素定义的 font-size。但 padding/margin 在 CSS 中不会继承父级定义的 padding/margin。
如果 padding/margin 使用 em 单位将参考本元素的 font-size。
下面示例中最终 strong 标签的 padding 与 margin 都是 60px，因为定义了 2em 所以最终结果为当前标签的 font-size*2
<style>
article {
font-size: 15px;
}
strong {
font-size: 2em;
padding: 2em;
margin: 2em;
}
</style>
<article>
<div>
<span>houdunren.com</span>
<strong>后盾人</strong>
</div>
</article>
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
# [#](https://doc.houdunren.com/系统课程/css/16 响应尺寸.html#rem)rem
rem 本向也有 em 的特性即参考继承，只不过它只参考根元素（root）即 html 标签定义的 font-size。我们来通过下面的示例详细说明。
- 为 html 标签定义了 font-size:30px，页面中使用 rem 单位的元素将 30px 为参考，即 1rem=30px
- span 标签使用了 font-size:2em，会参考父级 article 定义的 font-size，最后计算结果为 font-size:30px
- strong 标签定义了 font-size:2rem，会参考 html 标签的 font-size，最后计算结果为 60px
- strong 标签定义了 padding:2rem，计算结果也是 60px
- strong 标签定义了 margin:2em，将会参考本身元素的 font-size，上面已经说明 strong 的 font-size 为 60px，所以最终 margin 结果为 120px
<style>
html {
font-size: 30px;
}
article {
font-size: 15px;
}
span {
font-size: 2em;
}
strong {
display: block;
font-size: 2rem;
padding: 2rem;
margin: 2em;
}
</style>
<article>
<div>
<span>houdunren.com</span>
<strong>后盾人</strong>
</div>
</article>
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
# [#](https://doc.houdunren.com/系统课程/css/16 响应尺寸.html#使用建议)使用建议
em 与 rem 都是不错的响应单位，根据需要进行选择。em 具有继承特性，rem 的参考元素是唯一 HTML，所以 rem 操作简单。em 继承关系会相对复杂。
布局上的 margin/padding 使用 rem 是不错的选择，字体大小等使用 em 与 rem 都可以。
# [#](https://doc.houdunren.com/系统课程/css/16 响应尺寸.html#尺寸响应)尺寸响应
# [#](https://doc.houdunren.com/系统课程/css/16 响应尺寸.html#问题分析)问题分析
下面是尺寸为 375x600 的设计稿，绿色区域为 200px 红色为 175px 宽度
使用固定像素定义时在 iphone6 与 iphon6 plus 中的显示效果并不相同
实例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css" />
</head>
<body>
<div class="left"></div>
<div class="right"></div>
</body>
<style>
div {
height: 600px;
}
.left {
width: 200px;
background: #76ba65;
float: left;
}
.right {
width: 175px;
background: #df0f71;
float: left;
}
</style>
</html>
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
# [#](https://doc.houdunren.com/系统课程/css/16 响应尺寸.html#自动响应)自动响应
实际操作中不同设备只能取宽或高一个尺寸为响应处理，一般情况下我们取宽度响应，高度自动处理。小尺寸时高度产生垂直滚动条，这并不影响什么。
计算公式
使用 rem 单位来处理响应，因为改变 rem 单位会影响所有使用 rem 的元素，这确实非常的方便。
- rem 是在根元素中定义的 font-size
- rem 用来在多个设备响应处理时使用
- html 元素也可以使用:root 选择器选择
下面展示的设计稿为 375px 宽，下面公式表示 1px 所占的屏幕尺寸宽度，有以下几点需要说明
- 100vw 表示 100%视口宽度
- 因为使用了 vw 宽度系统会根据不同设备自动计算 rem
:root {
font-size: calc(100vw / 375);
}
2
3
完整代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>houdunren.com</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css" />
</head>
<body>
<div class="left"></div>
<div class="right"></div>
</body>
<style>
:root {
font-size: calc(100vw / 375);
}
div {
height: 600rem;
}
.left {
width: 200rem;
background: #76ba65;
float: left;
}
.right {
width: 175px;
background: #df0f71;
float: left;
}
</style>
</html>
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
现在使用不同设备时宽度已经自动可以响应设置了