css单位的介绍

css单位就是我们在写css样式中会用到的单位。一般主要分为相对单位和绝对单位。那么问题来了，为什么要有这么多不同的css单位呢？ -- 因为前端浏览器的窗口是可以调节的，而且不同设备的分辨率也是不同的，因此需要不同的css单位来实现不同浏览器，不同端都能样式正常且美观。

分辨率

什么是分辨率

分辨率通俗的讲就是屏幕图像的精密度，也指屏幕所能显示的像素的多少。分辨率越高，越清晰。分辨率可以用以下两个指标进行量化。

像素间距：指两个像素点之间的距离。像素间距越小，图像越清晰。
像素密度：也就是我们常说的ppi，指的是每英寸的像素数（一般是以对角线进行划分）。ppi越高，图像也越精细

屏幕尺寸：指的就是屏幕对角线的长度，单位英寸屏幕分辨率：宽度和高度上最多能显示的物理像素点个数设备像素（也叫物理像素）：指设备能控制显示的最小物理单位，指显示器上一个个的点，单位是pt。这个值是不变的。 DIP: 设备独立像素也叫逻辑像素。他在应用程序中使用，然后底层图形系统将它转换为适用于特定设备的物理像素。 DPI：每英寸像素点，印刷行业术语，相当于屏幕的PPI。

常见设备的分辨率有哪些？

电脑屏幕

16：9的宽屏液晶屏：1920×1080
16：10的24寸宽屏液晶屏：1920×1200
16：10的22/20寸宽屏液晶屏：1680×1050
16:10比例的19（18.5）与17英寸宽屏液晶显示器的最佳分辨率是：1440×900。
16:10比例的14、13、12（12.1）英寸宽屏液晶显示器（多为笔记本电脑屏幕）的最佳分辨率是：1280×800。
16:9宽高比常见的分辨率有四种：1280×720（17吋）、1366×768&1360×768（18.5吋）、1600×900
（20吋）、1920×1080（21.5、23、23.6、24、24.6、25、27）。
1280×800是笔记本常用的分辨率
16:10常见的分辨率有1280×800（13.3、14.1、15.4吋笔记本）、1440×900（17.1吋、19吋）、
1680×1050（20吋、21.6吋、22吋）、1920×1200（22、24、25.5、27、27.5）
5:4常见的分辨率有1280×1024（17吋、19吋）
三星214T 21吋4:3普屏液晶，分辨率1600×1200
4:3常见的分辨率有800×600、1024×768（17吋CRT、15吋LCD）、1280×960、1400×1050（20吋）、1600×1200（20、21、22吋LCD）、1920×1440、2048×1536（高端CRT显示器）

移动设备

平板

iPad 4、iPad5屏幕 2048x1536
Ipad mini、iPad 2屏幕尺寸是7.9英才，分辨率是1024*768
三星Galaxy note 10.1、Tab3.8、Tab2 P5100屏幕尺寸是10.1英寸，屏幕分辨率是1280*800
三星Galaxy Tab P3110、Tab3.7屏幕尺寸是7英寸，屏幕分辨率是1024*600
谷歌Nexus 7屏幕尺寸是7英寸，屏幕分辨率是1280*800

手机

iPhone4、4s屏幕尺寸是3.5英寸，屏幕分辨率是960*640
iPhone5、5s屏幕尺寸是4英寸，分辨率是1136*640
三星Galaxy s4屏幕尺寸是5英寸，分辨率是1920*1080
三星Galaxy Note2、S3屏幕尺寸是5.5英寸和4.8英寸，分辨率都是1280*720
三星Galaxy Note 屏幕尺寸是5.3英寸，分辨率是1280*800

分辨率对我们写样式有什么影响

不同的分辨率对页面的显示会不一样，因此我们在开发的过程中，需要根据不同的分辨率将页面的元素转换成合适的像素。前端页面适配不同分辨率的方式如下：

let deviceWidth = document.documentElement.clientWidth; // 获取当前分辨率下的可视区域的宽度
let scale = deviceWidth / 1920;   // 1920是我们设计稿的尺寸
document.body.style.zoom = scale;  // 放大缩小相应的倍数

相对单位

什么是相对单位

相对单位就是相对于另一个长度的长度。主要分为两类

字体相对单位：都是根据font-size来计算的。有rem，em, ex, ch
窗口相对单位：根据视窗大小来决定的。常见的有vw，vh, vmax, vmin

相对单位详细介绍

rem rem是相对于根元素html的font-size来计算的。如果html的font-size是16px, 那么1rem就是16px,2rem就是32px, 依次类推。如果html没有设置font-size, 那么不论设置多少rem就等同于没有设置。
em em和rem类似，只是它不是相对于html，而是如果自身设置了font-size那么就是相对自身，如果自身没有设置font-size就会去找它的元素，如果父元素上也没有设置，就会一直往上找，直到找到为止。如果父元素的font-size是16px, 那么1em就是16px,2em就是32px, 依次类推。如果它的上级一直都找不到font-size, 那么不论设置多少em就等同于没有设置。
ex ex是排版用的单位，我们在写css样式中用的并不多，它的大小取决于元素的font-size和font-family属性。 ex指的是所用字体中小写字母x的高度。如果两个字体不同，那么ex的值也是不同的。
ch ch也是排版用的单位，我们在写css样式中用的并不多，它的大小取决于元素的font-size和font-family属性。 ch和ex类似，不过它是基于数字0的宽度来计算的。会随着字体的变化而变化。而0 的宽度通常是对字体的平均字符宽度，它是一个估计值。由于 ch 是一个近似等宽的单元，所以在设置容器的宽度时很有用，比如一个容器想要显示指定个数的字符串时，就可以使用这个单位。
vw vw是视窗单位，是相对于可视区来计算的，在移动端中也就是相对于布局视窗，表示的是视窗宽度的百分比。视窗大小变化，那么这个值计算出来的大小也会改变。
vh vh也是视窗单位，是相对于可视区来计算的，在移动端中也就是相对于布局视窗，表示的是视窗高度的百分比。视窗大小变化，那么这个值计算出来的大小也会改变。
vmax vmax也是视窗单位，是相对于可视区来计算的，在移动端中也就是相对于布局视窗，与视窗宽度和高度的最大值和最小值都有关。假如一个视窗的宽度是500px，高度是1200px, 那么1vmax就是12px;
vmin vmin也是视窗单位，是相对于可视区来计算的，在移动端中也就是相对于布局视窗，与视窗宽度和高度的最大值和最小值都有关。假如一个视窗的宽度是500px，高度是1200px, 那么1vmin就是5px;

绝对单位

什么是绝对单位

绝对单位是一个固定的值，它反映了一个真实的物理尺寸。它不会受屏幕大小或者字体的影响。它的大小取决于值以及屏幕的分辨率（DPI，每英寸的像素点数）。

绝对单位有哪些

绝对单位下面会详细介绍，它们的换算方式如下： 1in = 25.4mm = 2.54cm = 6pc = 72pt = 96px;

px px表示像素，也被称为是css像素，并不严格等于显示器的像素。它是一个绝对单位，也可以看成是一个相对单位，是相对于设备像素而言的。
pt pt全称为point, 表示点。一般是印刷的时候会用到，无论分辨率为多少，pt的大小都不会发生改变。
pc 全称Picas, 表示派卡，是印刷单位。
cm 这个大家应该都清楚吧。厘米： 1cm = 37.9px;
mm 这个大家应该也清楚吧，毫米: 1mm = 3.78px;
in 全称Inches，表示英寸。1in = 96px;

频率单位

什么是频率单位

只有在听说级联样式表中才会用到这类频率单位，可以用来改变一个语音阅读文本的音调。低频率表示低音，高频率表示高音。

频率单位有哪些

赫兹（HZ）
千赫兹（kHZ）其中：1kHZ = 1000HZ

角度单位

角度单位一般用于元素的旋转，正值表示顺时针旋转，负值表示逆时针旋转。在渐变中也会用到角度单位。

角度单位有哪些

下面角度单位之间的转换如下： 90deg = 100grad = 0.25turn ≈ 1.570796326794897rad

deg 也就是我们常说的角度。全称是degrass。一个圈表示360度
grad 全称Gradians, 表示梯度，一个圆总共400梯度
rad 全称Radians, 表示弧度，一个圆总共2π弧度
turn 全称为Turns, 表示圈（转）,一个圈总共一圈（转）

时间单位

时间单位我们见的比较多，主要有秒(s)和毫秒（ms），转换是1s = 1000ms；

分辨率单位

分辨率单位是css3中新增的单位。只允许正值，不允许为负值。主要有以下三个单位：

dpi
dpcm
dppx 主要换算方式：

1dppx = 96dpi
1dpi ≈ 0.39dpcm
1dpcm ≈ 2.54dpi

百分比单位

百分比单位是我们在开发中常用到的单位之一，对于百分比来说，最重要的就是这个值是相对于谁来计算的百分比。下面我们根据几种场景具体分析

盒模型中的百分比

width, min-width, max-width: 对于这类和宽度相关的属性，它的百分比是相对于包含块的宽度来计算的，如果包含块没有设置宽度，基本就相当于auto
height, min-height, max-height: 对于这类和高度相关的属性，它的百分比是相对于包含块的高度来计算的，如果包含块没有设置高度，基本就相当于auto
padding, margin: 这类值设置百分比的话，如果设置的水平方向上的，那就是相对于包含块的width来计算的，如果设置的方向是垂直方向上的，那就是相对于包含块的height来计算的

文本中的百分比

font-size: 根据父元素的font-size来进行计算的
line-height: 根据自身的font-size来进行计算的
vertical-align: 根据line-height来进行计算的
text-indent: 如果是水平的，则根据width来进行计算，如果是垂直方向的，则根据height来进行计算的

定位中的百分比

元素是static或者relative，包含块一般是它的父容器，那么left, right水平方向上的就是根据包含块的width来进行计算的，top, bottom垂直方向上的就是根据包含块的height来进行计算的
元素是绝对定位，包含块应该是离他最近的position为relative，absolute，fixed的祖先元素。那么left, right水平方向上的就是根据包含块的width来进行计算的，top, bottom垂直方向上的就是根据包含块的height来进行计算的
元素是固定定位的，包含块就是视窗。那么left, right水平方向上的就是根据包含块的width来进行计算的，top, bottom垂直方向上的就是根据包含块的height来进行计算的

变换中的百分比

translateX(): 根据容器的width来计算的
translateY(): 根据容器的height来计算的
transform-origin: 横坐标（x）相对于容器的width来计算的，纵坐标(y)相对于容器的height计算

边框中的百分比

border-radius: 这个有点复杂，如果是一个百分比的值那就是以盒子的宽度来计算的，如果是两个值的话那就是第一个值是以盒子的宽度来计算的，第二个值以盒子的高度来计算的，以这两个值中的最大值作为圆角的半长轴，最小值作为圆角的半短轴。

在具体开发的时候应该怎样选择css单位

时间单位主要用于过渡和动画中，用于定义持续时间或延迟时间。定时器中的单位主要是ms。
分辨率单位主要是用于媒体查询，处理响应式布局等。
角度单位主要用于元素的旋转变换，以及线性渐变会用到。
百分比单位和相对单位中的rem, em, vw, vh都是在实现自适应布局中会用到，具体使用哪种单位还是要根据布局效果来定义。
绝对单位除了px之外在我们写css样式中基本上不会使用