admin管理员组

文章数量:829163

认识css长度单位 px % em rem vh vw

目录

  • 长度单位
  • px
  • %
  • em
  • rem
  • vh、vw
  • 总结

长度单位

在日常的项目开发,在使用css样式进行时布局的时候,我们常常用到px、%、em这三个单位。CSS3开始,浏览器新增加了rem、vh、vw、vm等一些新的计量单位。利用这些新的计量单位能够开发出比较好的响应式页面,更大限度适应各种分辨率的终端,包括移动设备、触摸大屏等等。

单位Value
相对长度单位em、ex、ch、rem、vw、vh、vmin、vmax、%
绝对长度单位cm、mm、in、px、pt、pc

长度单位众多,讲述px、%、em、rem、vh、vw这几个常用的。

px

px是绝对长度。表示像素,就是在我们显示器上呈现的一个一个的小点,每个像素点的大小都是等同。
可能其他人会把它归为相对长度的行列,因为移动端存在像素比dpr(devicePixelRatio),devicePixelRatio是设备上物理像素和设备独立像素(device-independent pixels (dips))的比例。可以看下图当dpr为2。即设置1px时在iphone6中显示2px

%

%是相对长度,相对于包含块(containing block)的高宽或字体大小。
关于包含块(containing block)的概念,不能简单地理解成是父元素。

  • 如果是静态定位和相对定位,包含块一般就是其父元素。
  • 如果是绝对定位的元素,包含块应该是离它最近的 position为非static属性的祖先元素。
  • 如果是固定定位的元素,它的包含块是视口(viewport)。

em

em是相对长度单位,相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置,则相对于浏览器的默认字体尺寸(1em = 16px),此Web页面中的body就继承了这个“font-size:16px;”,除非你在CSS样式中显式的设置body的“font-size”值,来改变其继承的值。例如在body的选择器中设置font-size= 62.5% ,10px = 1em, 也就是说只需要将你的原来的px 数值除以 10,然后换上 em作为单位就行了

特点:

  • em 的值并不是固定的
  • em 会继承父级元素的字体大小
  • em 是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置,则相对于浏览器的默认字体尺寸
  • 任意浏览器的默认字体高都是 16px

rem

rem是相对单位,相对的只是html根元素font-size的值,默认16px = 1rem,想要改变rem的值,只要在html的选择器中设置font-size的值。

html {font-size: 50px
}
//现在的 1rem = 50px

特点:

  • rem单位可谓集相对大小和绝对大小的优点于一身
  • 和em不同的是rem总是相对于根元素,而不像em一样使用级联的方式来计算尺寸

vh、vw

vw ,就是根据窗口的宽度,分成100等份,100vw就表示满宽,50vw就表示一半宽。(vw 始终是针对窗口的宽),同理,vh则为窗口的高度

这里的窗口分成几种情况:

  • 在桌面端,指的是浏览器的可视区域

  • 移动端指的就是布局视口

像vw、vh,比较容易混淆的一个单位是%,不过百分比宽泛的讲是相对于父元素:

  • 对于普通定位元素就是我们理解的父元素
  • 对于position: absolute;的元素是相对于已定位的父元素
  • 对于position: fixed;的元素是相对于 ViewPort(可视窗口)

总结

  • 「px」:绝对单位,页面按精确像素展示

  • 「%」:相对单位,相对于包含块(containing block)的高宽或字体大小

  • 「em」:相对单位,基准点为父节点字体的大小,如果自身定义了font-size按自身来计算,整个页面内1em不是一个固定的值

  • 「rem」:相对单位,可理解为root em, 相对根节点html的字体大小来计算

  • 「vh、vw」:主要用于页面视口大小布局,在页面布局上更加方便简单

本文标签: 认识css长度单位 pxem rem vh vw