• 24小时服务热线:400-088-1128

当前位置 南顺网络>> 知识拓展

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

CSS长度单位

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

物理像素(设备像素)

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

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

为了理解像素和避免与CSS像素混淆,
可以将物理像素当做物理小方块。
比如iPhone5的像素是640X1136px,可以当做640*1136个小方块。
复制代码

分辨率

也叫做解析度,解像度。可以从显示分辨率与图像分辨率两个方向来分类。

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