# CSS 长度单位
不知你是不是只会用
px屏幕像素单位来定义你的DOM元素，始终固定来元素的大小，在面对浏览器缩放的时候，显得元素特别别扭，没有响应式的效果。今儿，来学习总结一下CSS中的尺寸单位，来解决这个问题。
长度单位的类型：
- 相对长度单位：
- 文本相对长度：
em,ex,ch,rem - 视口相对长度：
vh,vw,vmax,vmin
- 文本相对长度：
- 绝对长度单位：
cm厘米,mm毫米,q1/4毫米,in英尺,pt点,pc派卡,px像素
1 in = 2.54 cm，1 pt = 1/72 in，1 pc = 12 pt ，1 px = 1/96 in
| 单位 | 版本 | 描述 |
|---|---|---|
vw | CSS3 | 相对于视口的宽度，视口被均分为100单位的 vw |
vh | CSS3 | 相对于视口的高度，视口被均分为100单位的 vh |
vmax | CSS3 | 相对于视口的宽度或高度，总是相对于大的那个。视口的宽度或高度被均分为100单位的vmax |
vmin | CSS3 | 相对于视口的宽度或高度，总是相对于小的那个。视口的宽度或高度被均分为100单位的vmin |
| 单位 | 版本 | 描述 |
|---|---|---|
em | CSS1 | 相对于当前对象内文本的字体尺寸 |
rem | CSS3 | 相对于根元素(即html元素)font-size计算值的倍数 |
ex | CSS1 | 相对于字符“x”的高度。通常为字体高度的一半 |
ch | CSS3 | 数字“0”的宽度 |
# 举栗子时间
# em和rem
em 定义为相对当前对象（父节点）内容文本的字体尺寸，如给body元素设置了font-size，那么body元素的任何子元素（孙子节点不算）的1 em 就是body设置的font-size大小。当em存在嵌套时，每个div元素都是从它上一级父元素继承大小，并且逐渐增大。
如果不想考虑嵌套问题，可以使用rem。rem中的r是root的意思，页面的根元素是<html>元素。当存在嵌套时，就不会出现类似套娃一样情况。如果html元素没有设置font-size属性时，会使用页面的默认值16px。
# vh 和 vw
响应式Web设计离不开百分比。但是，CSS 百分比并不是所有问题的最佳解决方案。CSS的宽度是相对于包含它的最近的父级元素的宽度。但是如果你就想要视口（viewpoint）的宽度或高度，而不是父元素的时候可以使用vh和vw。
先来了解一下视口是什么
视口是浏览器上显示网页的一块区域，大小并不局限于浏览器可视区域范围，且PC端和移动端视口差别很大。
PC端：视口宽度始终与浏览器窗口宽度一致；
移动端：视口宽度与浏览器窗口完全独立。
在PC端，视口大小等于浏览器窗口可视区域大小，无论浏览器是否缩放。
在移动端，视口分为三类：布局视口、视觉视口，完美视口
布局视口
布局视口是指网页的宽度，一般移动端浏览器都默认设置了布局视口的宽度。根据设备的不同，布局视口的默认宽度有可能是768px、980px或1024px等，这个宽度并不适合在手机屏幕中展示。移动端浏览器之所以采用这样的默认设置，是为了解决早期的PC端页面在手机上显示的问题。下面通过图1演示什么是布局视口。
当移动端浏览器展示PC端网页内容时，由于移动端设备屏幕比较小，不能像PC端浏览器那样完美地展示网页，这正是布局视口存在的问题。这个时候会出现左右滚动条。
document.documentElement.clientWidth //布局视口的宽度
document.documentElement.clientHeight //布局视口的高度
2
视觉视口
视觉视口是指用户正看到的网页区域，这个区域的宽度等同于移动设备的浏览器窗口的宽度。同时大小也等于屏幕中CSS像素的数量。页面缩放会对视觉视口的尺寸产生影响，当页面放大一倍时，CSS像素点的体积放大一倍，视口内的像素数量会减少一倍，如果缩小，则正好相反。
window.innerWidth //视觉视口的宽度
window.innerHeight //视觉视口的高度
2
完美视口
布局视口不友好，没有考虑到手机尺寸，所以苹果公司引入完美视口的概念。它是对设备来说最理想的布局视口尺寸，用户进入页面不需要进行缩放。采用如下代码可以将布局视口尺寸设置为理想尺寸。
<meta name="viewport" content="width=device-width">
将布局视口的宽度设置为设备独立像素的宽度，这样就不会出现横向滚动条，通过如下代码可以获取设备独立像素的尺寸。
screen.width //设备独立像素宽度
screen.height //设备独立像素高度
2
回到vh和vw
1 vh等于1/100 的视口高度（浏览器高度）。
vmin 和 vmax
vh和vw是依据视口的高度和宽度，而vmin和vmax则是关于视口高度和宽度的最小值和最大值。
# 参考文献
[1] HTML中文 https://www.html.cn/book/css/values/length/index.htm
[2] WEB骇客 https://www.webhek.com/post/7-new-css-units.html
[3] CSS—viewport视口详解 https://blog.csdn.net/weixin_42472040/article/details/104158020
[4] 布局视口、视觉视口和理想视口分别是什么 http://www.itheima.com/news/20200910/171437.html