一文搞懂CSS中的字体单位大小(px,em,rem...)

时间 2019-11-29

标签一文 css 字体单位大小 rem 栏目 CSS 繁體版

原文原文链接

前言

在学习的过程当中,发现CSS有不少能够描述单位的尺寸。好比px,em,rem,vw等等。平时也没有深究，一来是没时间，二来是在我学习清单中优先级太低。一直想完全弄明白，一直耽搁到如今。如今花上一点时间来整理一下，完全弄懂它。css

CSS长度单位

绝对长度单位。绝对长度单位表示为一个固定的值，不会改变。不利于页面渲染。
- in,英寸
- cm, 里面
- mm, 毫米
- pt
- pc
相对长度单位。其长度单位会随着它的参考值的变化而变化。
- px,像素
- em,元素的字体高度
- %,百分比
- rem,根元素的font-size
- vm,视窗宽度，1vw=视窗宽度的1%
- vh,视窗高度，1vh=视窗高度的1%

物理像素(设备像素)

好比有一个图片，细分，最小单位就是像素。也就是说，图片由许多的像素构成。像素是小方块，这些小方块都有一个明确的位置和被分配的色彩数值，小方格颜色和位置就决定该图像所呈现出来的样子。html

一个设备生产出来，它们的像素就已经肯定了。iPhone5的分辨率是640x1136px,表明屏幕由640行，1136列像素小方块组成。

为了理解像素和避免与CSS像素混淆，
能够将物理像素当作物理小方块。
好比iPhone5的像素是640X1136px,能够当作640*1136个小方块。
复制代码

分辨率

也叫作解析度，解像度。能够从显示分辨率与图像分辨率两个方向来分类。前端

屏幕分辨率。是屏幕图像的精密度，是指显示器所能显示的像素有多少，即显示器能够能够显示的小方块有多少个。
- 显示器的可显示的小方块越多，画面就越精细，一样的屏幕区域内能显示的信息也越多
- 能够把整个图像想象成是一个大型的棋盘，而分辨率的表示方式就是全部经线和纬线交叉点的数目。棋盘的小方块越多，能够放的棋子就越多。
- 显示分辨率必定的状况下，显示屏越小图像越清晰，反之，显示屏大小固定时，显示分辨率越高图像越清晰。(小方块同样多的状况下，显示屏越小越清晰；屏幕大小同样大的时候，小方块越多图形越清晰)

CSS像素px

CSS像素的单位也叫作px。它是图像显示的基本单元，既不是一个肯定的物理量，也不是一个点或者小方块，而是一个抽象概念。因此在谈论像素时必定要清楚它的上下文！css3

为了保证阅读体验一致，CSS能够自动在不一样设备之间能够调节。即一份代码能够在不一样的大小的设备之间显示，而且能够保证阅读体验一致。
默认状况下一个CSS像素应该是等于一个物理像素的宽度。
可是在高PPI的设备上，CSS像素甚至在默认状态下就至关于多个物理像素的尺寸。好比iPhone的屏幕对比通常的手机屏幕会看起来更精细清晰一些。
在浏览器上经过ctrl +/-能够扩大缩小屏幕，其实就是屏幕分辩率的调低/调高。ctrl +屏幕放大，分辨率下降。
iPhone6,7,8都是两倍屏手机，即一个CSS像素等于2物理像素。iPhone6Plus等是三倍屏手机，一个CSS像素等于3物理像素。
以iPhone6为例，设计稿给出一个图片宽高为40*40。在实际开发中要除以2，宽高要写成20x20。由于iPhone6是两倍屏手机。

em

em是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸,浏览器字体默认为16px。git

因此，1em = 16px。默认状况下。

如何高效使用em呢

body里声明font-size:62.5%。即全局声明1em = 16px * 62.5% = 10px
以后能够把em当作px使用。固然此时，1em = 10px
若是在父容器里说明了font-size:20px,那么在子容器里的1em就等于20px。

rem

rem单位是相对于字体大小的html元素，也称为根元素。github

html {
  font-size: 10px; /* 不建议设置 font-size: 62.5%; 在 IE 9-11 上有误差，具体表现为 1rem = 9.93px。 */
}

.sqaure {
  width: 5rem;  /* 50px */
  height: 5rem; /* 50px */
}
复制代码

em与rem

rem是相对于根元素（html）的字体大小，而em是相对于其父元素的字体大小。
em最多取到小数点的后三位

<style>
  html{ font-size: 20px; }
  body{ 
    font-size: 1.4rem;  /* 1rem = 28px */
    padding: 0.7rem;  /* 0.7rem = 14px */
  } 
  div{
    padding: 1em;  /* 1em = 28px */
  }
  span{
    font-size:1rem;  /* 1rem = 20px */
    padding: 0.9em;  /* 1em = 18px */
  }
</style>

<html>
  <body>
    <div>   
      <span></span>  
    </div>
  </body>
</html>
复制代码

上面的例子中，发现了一个有意思的状况。em 会层层继承父元素的字体大小，很容易形成字体大小的混乱。因此之后用rem会更好。小程序

rpx

rpx 是微信小程序解决自适应屏幕尺寸的尺寸单位。微信小程序规定屏幕的宽度为750rpx。微信小程序

不管是在iPhone6上面仍是其余机型上面都是750rpx的屏幕宽度，拿iPhone6来说，屏幕宽度为375px，把它分为750rpx后， 1rpx = 0.5px = 1物理像素。浏览器

vw 和 vh

vw,视窗宽度，1vw=视窗宽度的1%
vh,视窗高度，1vh=视窗高度的1%
若是浏览器的高是900px,1vh求得的值为9px。同理，若是显示窗口宽度为750px,1vw求得的值为7.5px。

vmin 和 vmax

vmin和vmax是相对于视口的高度和宽度二者之间的最小值或最大值。
浏览器的高为1100px、宽为700px，那么1vmin就是7px，1vmax就是11px
浏览器的高为800px，宽为1080px，那么1vmin也是8px，1vmax也是10.8px
vmin取宽度高度二者更小者/100
vmax取宽度高度二者更大者/100

哪些地方能够用到

一个老是在屏幕上可见的元素。使用高度和宽度设置为低于100的vmin值将能够实现这个效果。
一个老是覆盖可视窗口的正方形(一直接触屏幕的四条边)

.box {
    height: 100vmax;
    width: 100vmax;
}
复制代码

参考文章

前端开发中像素的概念bash

最全的CSS尺寸单位介绍

CSS3中常见的单位移动设备分辨率（终于弄懂了为何移动端设计稿老是640px和750px）

几个CSS的单位你须要了解一下

个人博客

欢迎访问个人博客，会分享一些技术文章，一块儿学习前端。