前端和设计师都要知道的css长度单位（css单位pt）
css的长度单位分为两种，一种为绝对长度，一种为相对长度。日常设计与开发中或多或少都会接触到。前端毕竟是根据设计稿写页面，UI设计师也是按照规范去设计页面。
绝对长度
px
即像素pixel，它是最基础也是最常用的一个长度单位
cm
厘米， 1cm=37.8px
mm
毫米，1mm=3.78px
in
即英尺inch， 1in=2.54cm=96px
pt
即点point，1pt=1/72in=1.33px
pc
即派卡，1pc=12pt=16px，派卡是印刷行业的长度单位
相对长度
em
一个字符大小，字符大小在浏览器中默认为16px
EM特点
-1. em的值并不是固定的；
-2. em会继承父级元素的字体大小。
所以我们在写CSS的时候，需要注意两点：
-1. body选择器中声明Font-size=62.5%；
-2. 将你的原来的px数值除以10，然后换上em作为单位；
-3. 重新计算那些被放大的字体的em数值。避免字体大小的重复声明。
避免1.2 * 1.2= 1.44的现象，比如说你在#content中声明了字体大小为1.2em，那么在声明p的字体大小时就只能是1em，而不是1.2em, 因为此em非彼em，它因继承#content的字体高而变为了1em=12px。
rem
rem是CSS3新增的一个相对单位（root em，根em）, 相对于根元素HTML的字体大小。这个单位与em有什么区别呢？区别在于使用rem为元素设定字体大小时，仍然是相对大小，但相对的只是HTML根元素。这个单位可谓集相对大小和绝对大小的优点于一身，通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。
例如，根元素的字体大小 16px，10rem 将等同于 160px，即 10 x 16 = 160。
简单点说就是根em.
百分比%
百分比是一个相对长度单位，相对于包含块（containing block）的高宽或字体大小
关于包含块（containing block）的概念，不能简单地理解成是父元素。
如果是静态定位和相对定位，包含块一般就是其父元素。
如果是绝对定位的元素，包含块应该是离它最近的 position为非static属性的祖先元素。
如果是固定定位的元素，它的包含块是视口（viewport）
vh
视口高度，默认为视口高度的1%
vw
视口宽度，默认为视口宽度的1%
<div class="left">left</div>
<div class="right">right</div>
<style>
* {
padding: 0;
margin: 0
}
.left {
float: left;
width: 50vw;
height: 20vh;
background-color: orange;
text-align: center;
line-height: 20vh;
font-size: 3rem
}
.right {
float: right;
width: 50vw;
height: 20vh;
background-color: red;
text-align: center;
line-height: 20vh;
font-size: 3rem
}
</style>
vmin
布局视口高度和宽度之中值较小的那个的 1/100
vmax
布局视口高度和宽度之中值较大的那个的 1/100
比如：浏览器高度950px，宽度为1920px, 1 vh = 950px/100 = 9.5 px，1vw = 1920px/100 =19.2 px。
vmax相对于视口的宽度或高度中较大的那个。其中最大的那个被均分为100单位的vmax。
vmin相对于视口的宽度或高度中较小的那个。其中最小的那个被均分为100单位的vmin。
fr
grid布局中利用的一个长度单位。在gird布局中，我们经常会利用fr来进行计算
<div class="grid">
<div class="column">1</div>
<div class="column">2</div>
<div class="column">3</div>
<div class="column">4</div>
<div class="column">5</div>
<div class="column">6</div>
</div>
<style type="text/css">
* {
margin: 0px;
padding: 0px;
}
.grid {
height:300px;
width: 1000px;
background: #f1f1f1;
margin: 20px auto;
overflow: auto;
display: grid;
grid-template-columns: 100px repeat(5, 1fr);
grid-column-gap: 10px;
}
.column {
background: orange;
}
</style>
当然也有小程序中的rpx，相对屏幕自适应
rpx（responsive pixel）: 可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在 iPhone6 上，屏幕宽度为375px，共有750个物理像素，则750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素。
