5个常用的CSS单位

我们在很多时候都需要用到CSS的尺寸 ， 字体大小，段落行距 ， 高度，margin等等
那这一篇文章主要讲解CSS常用的5个单位

{01} px

px是一个绝对单位，他代表你现在使用的屏幕的像素比例中的一个光点 例如1920*1080就代表横屏幕由1920个像素光点组成 那1px就是 1/1920个距离
但他是一个绝对单位在很多时候会不容易更改,比如我们在设定文字大小时通常还会设置行高，那我们在修改时两个都要同时修改

p{
	font-size:12px;
	line-height:6px;
}

{02} em

em是一个相对单位，基于目前这个容器的大小设定可以理解为倍数。例如我们将body设置为字体10px,
那么p中的2em就是两倍即为20px，注意是基于父元素的设定

body{
font-size:10px;
}
p{
font-size:2em;
}

{03} rem

他也是一个相对单位，同em唯一的不同他相对的单位是：root 所以是 root em 所以他的用处常在自适应网站根据屏幕比例获取不同的html字体大小，再去设定每一个子元素的大小

这里分享一个可以根据屏幕大小自动获取html字体大小的封装函数

(function(doc, win) {
  /* 自适应 */
  var docEl = doc.documentElement,
    resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
    recalc = function() {
      var clientWidth = docEl.clientWidth;
      if (!clientWidth) return;
      docEl.style.fontSize = 50 * (clientWidth / 320) + 'px';
    };
  if (!doc.addEventListener) return;
  win.addEventListener(resizeEvt, recalc, false);
  doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);

{04} vh&vw

这两个单位也是相对单位，即为viewport height viewport width他代表的是屏幕可视局域的相对值 值可选由1到100 例如下面这个div就可占屏幕的高一半宽一半 注意**（vh用作高度，vw用作宽度）**

div{
	height:50vh;
	width:50vw;
}

{05} vmin&vmax

首先介绍这两个单位分别代表屏幕短的一边和屏幕长的一边，在以往我们是不需要这样的需求的，但现在智能手机的出现我们有了旋转屏幕这个动作 ， 所以vmin 和vmax 通常配合 Media Query来完成响应式的页面。 他和vh一样也是值由1到100 例如下面这个图片我们设定宽度为最小边满屏，这样手机就算旋转为横屏这个图片也是完整的显示不会出现滚动条了

body{
margin:0;
padding:0;
}
img{
width:100vmin；
}

---

如有错误，请指正！