css3中单位px,em,rem,vh,vw,vmin,vmax的区别及浏览器支持情况

CSS3中常用的单位包括：px、em、rem、vh、vw、vmin、vmax。

px（Pixel）

• px是相对长度单位，它是绝对单位的一种，表示屏幕上的一个点，通常对应一个物理像素。
• px单位的优点是在不同的浏览器下显示效果稳定，但是其缺点是响应式布局使用不便，且在高分辨率显示器中会出现模糊不清的现象。

em

• em是基于当前字体大小的相对值，例如一个元素的字体大小设置为16px，则1em等于16px。
• em单位的优点是能够根据其父元素的大小进行相对伸缩，非常适合移动端响应式布局，但在多层嵌套时会出现相互影响的问题。

rem

• rem是基于根元素字体大小的相对值，即相对于html元素的font-size计算，例如根元素字体大小设置为16px，则1rem等于16px。
• rem单位的优点是能够方便的进行响应式布局，不受多层嵌套的影响，但是IE8及一些低版本的浏览器不支持它。

vh、vw、vmin、vmax

• vh表示屏幕的宽度的1%；vw表示屏幕的高度的1%。
• vmin表示视口宽度和高度中较小的值；vmax表示视口高度和宽度中较大的值。
• vh、vw、vmin、vmax这几个单位是CSS3中针对视口大小设计的单位，可以用于响应式布局。但是，在支持度上，IE不支持通过这些单位来设置CSS，仅仅兼容IE9以上版本。

示例一：

.container {
  width: 80vw; /* 视口宽度的80% */
  height: 50vh; /* 视口高度的50% */
}

示例二：

.container {
  font-size: 3vmin; /* 根据视口大小设置字体大小 */
}

以上是关于CSS3中常见的单位的详细讲解及浏览器支持情况。需要注意的是，在进行响应式布局时，要选择合适的单位，以适应不同设备显示效果的需求。