爱客仕-前端团队博客园

浅谈Viewport单位

发表于 |

响应式布局常用方法

在响应式布局中，为了使不同的显示设备拥有更合理的显示效果，比如内容字体大小，我们经常用的是Media query，百分比以及文字大小单位em，rem

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
<html>
  <body>
	<p>测试字体大小  测试字体大小</P>
	<h1>h1字体</h1>
	<div class="content">文本内容</div>
  </body>
</html>
<style type="text/css">
  /* 先设置根元素字体大小 */
  body {
	font-size: 12px
	@media screen and (min-width: 360px) {
	  font-size: 16px
	}
	@media screen and (min-width: 400px) {
	  font-size: 18px
	}
	@media screen and (min-width: 440px) {
	  font-size: 20px
	} 
	@media screen and (min-width: 480px) {
	  font-size: 22px
	}
	@media screen and (min-width: 640px) {
	  font-size: 28px
	}
  }
  p {
    font-size: 1rem
  }
  h1 {
    font-size: 1.25rem
  }
  .content {
	font-size: .85rem
  }
</style>

有时候为了更好地适用所有的设备排版效果，需要添加多个@media，而视口单位的应用可以让媒体查询声明字体大小更方便

什么是视口(Viewport)单位

在 CSS 规范中，有4种类型的可用视口单位：

  • vw: 1vw 等于视口宽度的 1%
  • vh: 1vh 等于视口高度的 1%
  • vmin: vw 和 vh 中的较小值
  • vmax: vw 和 vh 中的较大值

视口指的是浏览器内部可视区域大小
即：

  • 100vw = window.innerWidth
  • 100vh = window.innerHeight
    这种根据区域大小弹性的自适应效果将很好的用于响应式布局

假如我们有一个宽度1000px 和 高度800px的Viewport
那么 50vm = 500px
50vh = 400px
50vim = 400px
50vmax = 500px

浏览器宽度在一定范围变化时字体大小相应的在一定范围内变化

为了更好的用户体验，比如希望浏览器大小在320-600范围内，字体大小在16px-24px范围内变动，怎么实现呢？

dang dang dang 公式来了

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
/* v1: font-size 差值 */
/* v2: 可视区域宽度差值 */
/* smaller-viewport-width: 较小的可视区域宽度 */
/* smaller-font-size: 较小的font-size值 */
html {
  font-size: calc(smaller-font-size/16 * 100% - v1/v2 * (100vw - smaller-viewport-width))
}
/* 实例 */
/* 浏览器在375~600范围内,字体在16px~24px范围内变化 */
/* smaller-font-size: 16 */
/* v1: 8 */
/* v2: 225 */
/* smaller-viewport-width: 375px */
html {
  font-size: calc(16/16 * 100% - 8/225 * (100vw - 375px))
}

结合@media可以更好地设置移动端及PC端根元素字体大小

[拿来主义]借用一段大神的代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
html {
  /* iPhone6的375px尺寸作为16px基准，600px正好18px大小 */
  font-size: calc(100% + 2 * (100vw - 375px) / 225);
}
@media screen and (min-width: 600px) {
  html {
    /* 600px-1000px每100像素宽字体增加1px(18px-22px) */
    font-size: calc(112.5% + 4 * (100vw - 600px) / 400);
  }
}
@media screen and (min-width: 1000px) {
  html {
    /* 1000px往后是每100像素0.5px增加 */
    font-size: calc(137.5% + 5 * (100vw - 1000px) / 1000);
  }
}

实例

使用视口单位实现弹框的垂直居中

1
2
3
4
5
.u-modal{
  width: 60vw;
  height: 60vh;
  margin: 20vh auto;
}

浏览器兼容情况

浏览器兼容情况
好了，在浏览器支持的情况下将em, rem, vm, vh, @media,百分比合理运用起来吧，响应式布局更容易了

参考文献

《基于视口单位的网页排版》
《基于vw等viewport视区相对单位的响应式排版和布局》
《视区相关单位vw, vh..简介以及可实际应用场景》
《移动端应该如何动态设置字体大小？》
《vm unit》