css中的常见单位

css中的常见单位

css中常用的单位有三种，分别是：绝对单位、相对单位、视窗单位

• 绝对单位则是我们最为熟悉的px，它是一种固定的像素单位，css中1px等于屏幕上的一个物理像素点
• 相对单位常见的则有rem、em、%这三种，首先，rem是相对根节点html字体大小来计算的，而em是基准点为自身的font-size属性计算的，如果自身没有设置font-size，则会基准与父级的字体大小；%百分比单位则是相对于父元素的尺寸进行计算。其中常用rem和%这两种方式实现响应式布局。三种单位的例子如下

html {
  font-size: 16px;
}
.parent {
  width: 10rem;
  padding: 1rem;//在此处1rem则等于16px
}
.child{
  font-size: 12px;
  width: 10em;//此处em则会根据自身的font-size来进行计算，为120px
}

div {
  width: 50%;//根据父元素的尺寸计算，为父元素的一半宽
  height: 50%;
}

• 视窗单位常见的则有vw、vh、vmin、vmax这四种
  vh和vw分别代表视口高度和视口宽度的百分比。使用vh和vw单位可以根据视口的大小来设置元素的尺寸。
  而vmin、和vmax则是根据vh和vw中较小的一方和较大的一方为基准，比如一个浏览器高度为800px，宽度为1200px，那么1vmin就是8px，1vmax就是12px。 ​ ​应用场景则是保证移动开发中屏幕 旋转之后的尺寸不变
  例如，我们可以使用vmin单位来设置一个元素的宽度和高度，使其始终保持一个正方形的形状，无论视口的宽高比是多少。代码示例：

div {
  width: 50vmin;
  height: 50vmin;
}