CSS 单位及其需要注意的地方

时间:2021-6-12 作者:qvyue
  • px(Pixel):相对长度单位,绝对像素值,它取决于显示器的分辨率。一旦分辨率确定,设置为 px 的尺寸就成为固定尺寸,不会自动缩放。(1px = 1/96英寸)

  • em:相对长度单位,相对于父元素的 font-size。如父元素未设置 font-size,则相对于浏览器的默认字体尺寸(1em = 16px,注意:浏览器的默认字体大小可以更改)。通常的做法是将默认的正文字体大小设置为 62.5%(等于 10px)。

  • remroot em):CSS3 新增的一个相对单位。相对于根元素的 font-size,其元素的大小都与根元素换算

  • %:相对于父元素

  • vw:相对于视口的宽度,1vw = 1% * viewport width(视口宽度)

  • vh:相对于视口的高度,1vh = 1% * viewport height(视口高度)

  • vmin:相对于视口的较小尺寸(vwvh 中的最小值),1vmin = min1vh1vw

  • vmax:相对于视口的较大尺寸(vwvh 中的最大值),1vmax = max1vh1vw

  • ch:相对于元素字体的字形 0 的宽度

  • in(英寸):1in = 2.54cm=96px

  • pcPicas,皮卡):1pc = 1in / 6 = 16px,也就是大约 6pt1/6 英寸,也就是 1pc = 12pt = 1/6in

  • ptPoint,点):1pt = 1in / 72 = 1.333px(大约),它是物理长度单位,相当于 1/72 英寸。通常在印刷中使用。(1pt = 1/72in

  • cm(厘米): 1cm = 96px / 2.54 = 37.8px(大约)

  • mm(毫米):1mm = 1cm / 10 = 3.78px(大约)

注意点

  • pxem 都是长度单位,区别是 px 的值是固定的,计算比较容易。em 得值不是固定的,并且 em 会继承父级元素的字体大小。
  • 浏览器的默认字体大小都是 16px。所以未经调整的浏览器都符合: 1em = 16px。那么 12px = 0. 75em10px = 0.625em
  • %em 是级联的,意思是父元素的的字体大小会影响到子元素。

理解视口:在桌面端,视口指的是浏览器的可视区域;而在移动端较为复杂,它涉及到三个视口:分别是 Layout Viewport(布局视口)、Visual Viewport(视觉视口)、Ideal Viewport。 而视口单位中的视口,在桌面端,毫无疑问指的就是浏览器的可视区域;但是在移动端,它指的则是三个 Viewport 中的 Layout Viewport

CSS 中的四个视口单位分部是 vwvhvminvmax。以下是它们的兼容情况:

CSS 单位及其需要注意的地方
vw,vh,vmin,vmax
  • 其他一些单位当做了解即可。
声明:本文内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎发送邮件至:qvyue@qq.com 进行举报,并提供相关证据,工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。