前言
大家好,我是 HoMeTown,明天聊一下 CSS 中em
、px
、rem
、vh
、vw
这些单位都有什么区别,什么时候该用什么单位,如何正确应用。
What?
首先,在咱们日常中的传统开发中,px
作为一等公民,成为了咱们应用最多的单位,其次是 %
以及 em
等单位,失常状况下,px
能够实用于大部分我的项目的开发,并且,具备良好的兼容性,然而从 CSS3
开始,浏览器对这些计量单位的反对又晋升到了一个新的高度,陆续推出了 rem
、vh
、vw
以及 vm
等一些新的计量单位,利用这些单位,敌对的帮忙咱们解决了开发响应式页面的问题,使得咱们开发进去的页面能够适配不同分辨率的设施。真香!
计量单位
在 CSS
的计量单位体系中,能够分为 绝对长度单位 和相对长度单位:
- 绝对长度单位包含:
em
、ex
、ch
、rem
、vw
、vh
、vmin
、vmax
、%
- 相对长度单位包含:
cm
、mm
、in
、px
、pt
、pt
、pc
px
即像素,由计算机根底或者设计根底的同学应该都比拟理解,像素其实就是对应咱们显示器上的一个个等同大小的点,因而,像素在计量单位体系中,属于相对长度单位,之前看到过网上的一些争执对于 px
是否为相对长度单位,我认为是属于相对长度单位,因为即便在挪动端中存在设施像素比,px 理论大小不确定,然而从主观的角度登程,px 的大小和元素与其余的属性无关。
特点:
- 兼容性好
- 使用方便
em
em 属于绝对长度单位。绝对对象为以后对象内文本的字体 size,如果以后行内文本的字体尺寸未设置,则绝对对象为浏览器的默认字体尺寸1em = 16px。
个别状况下,为了简化 font-size
的换算,咱们须要在 css 中的 body 选择器中申明 font-size=62.5%
,使得 em 值变为16px*62.5% = 10px
,这样 12px = 1.2em
, 10px = 1em
, 也就是说只须要将你的原来的px
数值除以 10,而后换上 em
作为单位即可。
特点:
- em 的值不固定
- em 会继承父级元素的字体尺寸
- em 是绝对长度单位,绝对以后行内对象的文本尺寸,如未设置,绝对浏览器的默认字体尺寸
举个🌰
<div class="outside">
我是 14px=14.rem
<div class="innerside"> 我是 12px=1.2rem</div>
</div>
html {font-size: 10px; /* 公式 16px*62.5%=10px */}
.outside {font-size: 1.4rem}
.innerside{font-size: 1.2rem}
此时,.outside
的 font-size
为14px
,而 .innerside
的font-size
为16px
,能够从图中显著看进去差别。
rem
rem 是绝对单位,与 em
不同的是,绝对对象只是 html
根元素的 font-size
,与em
同理,能够在根元素中写入font-size: 62.5%
,来简化转化。
html {font-size: 62.%; /* 公式 16px*62.5%=10px */}
这样,在咱们的页面中1rem = 10px
、1.2rem = 12px
,以此类推。
特点:
- rem 单位有 px & em 两者的长处
vh、vw
vw,就是依据窗口的宽度,分成 100 等份,100vw 就示意满宽,50vw 就示意一半宽。(vw 始终是针对窗口的宽),同理,vh
则为窗口的高度
这里的窗口分成几种状况:
- 在桌面端,指的是浏览器的可视区域
- 挪动端指的就是布局视口
像vw
、vh
,比拟容易混同的一个单位是%
,不过百分比宽泛的讲是绝对于父元素:
- 对于一般定位元素就是咱们了解的父元素
- 对于 position: absolute; 的元素是绝对于已定位的父元素
- 对于 position: fixed; 的元素是绝对于 ViewPort(可视窗口)
总结
px:相对单位,页面按准确像素展现
em:绝对单位,基准点为父节点字体的大小,如果本身定义了 font-size
按本身来计算,整个页面内 1em
不是一个固定的值
rem:绝对单位,可了解为 root em
, 绝对根节点html
的字体大小来计算
vh、vw:次要用于页面视口大小布局,在页面布局上更加不便简略