css单位 % em rem vw vh vmin vmax pt ch ex

px

像素 (计算机屏幕上的一个点)，项目开发中特别是移动端开发我经常会使用webpack将px转化为rem来适应屏幕宽度

%

百分比，理解为和父元素字符的相对大小，但是有几个注意点：

1. 对于普通元素，相对于父元素大小

2. 对于

position: absolute

元素，相对于已经定位的父元素（

position: relative

）

3. 对于

position: fixed

，相对于浏览器的viewport

em

相对于使用em单位的元素的字体大小。

很多人误解为相对父元素字体大小，这纯粹是因为字体属性继承的特性

任意浏览器的默认字体高都是16px。所有未经调整的浏览器都符合: 1em=16px。那么12px=0.75em,10px=0.625em。为了简化font-size的换算，需要在css中的body选择器中声明font-size=62.5%，这就使em值变为 16px*62.5%=10px, 这样12px=1.2em, 10px=1em, 也就是说只需要将原来的px数值除以10，然后换上em作为单位就行了。

所以我们在写CSS的时候，需要注意两点：

1. body选择器中声明Font-size=62.5%；
2. 将你的原来的px数值除以10，然后换上em作为单位；

缺点：

虽然em相对于纯手写px灵活性和可配置性提高很多，但是使用起来也比较混乱，因为em依赖自身font-size，而font-size具有继承特性，实际项目开发中，不同层级的div和模块字体要求大不相同，如果统一使用em作为单位，很容易造成修改一个元素的font-size然后造成所有子元素的尺寸和字体的变化，除非手写每一个元素的font-size，但是这样也非常麻烦，因为这样就失去了字体继承的意义

rem

所以就出现了rem, 集相对绝对优点于一身

css3新特性，相对于根元素html的字体大小，这样使用起来就安全多了，避免字体大小逐层复合的连锁反应，而且可以通过控制根元素字体大小来控制全局的尺寸大小缩放。

vw vh

• vw —代表视窗(Viewport)的宽度，和%用法相似
• vh —代表视窗(Viewport)的高度

vw和vh会随着viewport变化自动变化，再也不用js控制全屏神马的了

你可以在任何一个可以使用像素值的地方使用它们，比如width,height,margin,font-size等等。它们将通过窗口大小的调整或旋转设备的浏览器来重新计算这些值。

于是，我们可以想到这可以用来：

• 一些元素的全屏，比如原来使用html,body 100% 来达到子元素继承目的来达到全屏的目的，还有弹出框的遮罩层一般使用fixed来全屏，现在统统可以用优雅的vh和vw来自适应全屏
• 全屏元素中的垂直居中，比如弹出框原来可以用position + tansform来达到目的，现在也可以使用vw和vh来垂直居中

#rectangle{ 
    width: vw;
    height: vh;
    margin: vh auto; }
           

• 字体自适应屏幕大小
• 栅格布局

vmin vmax

• vmin —当前vw和vh中较小的值
• vmax —当前vw和vh中较大的值

其实都是一些利用viewport尺寸的伎俩

ch ex

这两个单位根据 当前font-family 的相对单位

• ch 字符0的宽度
• ex 小写字符x的高度

当font-family改变的时候这两个单位的值也会变化，不同字体表现的样式不一样

pt

point，是一个标准的长度单位，1pt＝1/72英寸，用于印刷业，非常简单易用