Css单位px,rem,em,vw,vh的区别
px 像素
像素,为影像显示的基本单位,译自英文“pixel”,pix是英语单词picture的常用简写,加上英语单词“元素”element,就得到pixel,故“像素”表示“画像元素”之意,有时亦被称为pel(picture element)。每个像素可有各自的颜色值,可采三原色显示,因而又分成红、绿、蓝三种子像素(RGB色域),或者青、品红、黄和黑(CMYK色域,印刷行业以及打印机中常见)。
简单来说,像素是一个 相对单位 ,不同于厘米这种任意物品都通用的尺寸。像素根据展示媒介的不同而大小不同。
例如我的电脑尺寸
宽1920个像素点,高1080个像素点
ps:想查看自己电脑的显示是多少像素可以使用
window+R
输入dxdiag回车运行
在显示的那一栏下可以找到
rem 根元素字体大小
它的全称是 font size of the root element (根元素的字体大小)
它是CSS3中新增加的一个尺寸(度量)单位,根节点(html)的font-size决定了rem的尺寸,也就是说它是一个相对单位,相对于(html)。
应用场景
可以用来做web app的屏幕适配
使用和修改
将根元素html的font-size设置为20px,此时box的宽高都为20px,也就是1rem = 20px
em 相对于父元素的大小
- 子元素字体大小的em是相对于父元素字体大小
- 元素的width/height/padding/margin用em的话是相对于该元素的font-size
% 相对长度单位
百分比是一个相对长度单位,相对于包含块(containing block)的高宽或字体大小。
关于包含块(containing block)的概念,不能简单地理解成是父元素。
如果是静态定位和相对定位,包含块一般就是其父元素。
如果是绝对定位的元素,包含块应该是离它最近的 position为非static属性的祖先元素。
如果是固定定位的元素,它的包含块是视口(viewport)。
vw、vh 相对于视口的单位
视口
在桌面端,视口指的是在桌面端,指的是浏览器的可视区域;而在移动端较为复杂,它涉及到三个视口:分别是 Layout Viewport(布局视口)、 Visual Viewport(视觉视口)、Ideal Viewport。 而视口单位中的“视口”,在桌面端,毫无疑问指的就是浏览器的可视区域;但是在移动端,它指的则是三个 Viewport 中的 Layout Viewport 。
pc端:浏览器的可视区域
移动端:Layout Viewport