px em rem fr 前端单位的区别

html-css019

px em rem fr 前端单位的区别,第1张

一、 px 全称是pixel(像素),相对长度单位,相对于屏幕分辨率而言的。

特点:IE无法调整使用px作为单位的字体大小;

二、em是基于基数来计算出来的相对字体大小

特点:①em是相对长度单位,相对于当前对象内文本的字体尺寸。如果当前对象文本大小未设定,则相对于浏览器的默认字体尺寸。

② em的值不是固定的;

③ em会继承父级元素的字体大小;

根据以上特点我们知道em单位转换为像素值,大小取决于自身父级元素所设置的px值大小。父级元素字体大小乘以em的值。

三、rem是css3新增的属性,也是一个相对单位

特点:rem只相对于HTML根元素,所以通过rem既可以设定页面根元素就成比例的调整所有字体的大小,有可以避免字体大小逐层复合的连锁反应。

如:浏览器默认的字号16px,那么,

| px | rem |

| 12 | 12/16 = .75 |

| 14 | 14/16 = .875 |

| 16 | 16/16 = 1 |

| 18 | 18/16 = 1.125 |

| 20 | 20/16 = 1.25 |

| 24 | 24/16 = 1.5 |

| 30 | 30/16 = 1.875 |

| 36 | 36/16 = 2.25 |

| 42 | 42/16 = 2.625 |

| 48 | 48/16 = 3 |

四、fr是自适应单位,fr单位被用在一系列长度值中分配剩余空间,如果多个已指定多个部分,则剩下的空间根据各自数字按比例分配。

(另外,vh,vw也是css3新增属性,分别是相对于视口的高度和宽度,视口被分为100等分)

作为一个小前端,最基本的布局应该已经是手到擒来的事情,但是在布局过程中,你是不是经常就使用px、%或者rem?其他的呢?你是否又熟悉?

下面就为同学们说一下css中可能会遇到的单位。

首先就从熟悉的开始:

第一种:px

px(像素)是CSS中最为常用的一种单位,传统上一个像素对应计算机屏幕上的一个点,对于高清屏则对应更多。

第二种:%

百分比也较为常用。其中对font-size设置百分比值时,是以浏览器默认字体大小16px为参照计算的。

第三种:em

em是一种计算方式为相对于父元素的字体大小的单位,1em等于父元素设置的字体大小,如果父元素没有设置字体大小,则继续往父元素查找,直到有设置大小的,若都没有设置大小,则使用浏览器默认大小。