css大小单位px em rem的转换_编程笔记
css大小单位px em rem的转换
2022-07-14 21:19:50 浏览：1040 作者：保利尼奥
css大小单位px em rem的转换，rem、em、vh/vw、px各自代表的含义。
1.rem rem是相对于根元素<html>字体的大小。通常做法是给html元素设置一个字体大小，一般浏览器默认字体大小为16px，那么可以看一下px单位与rem之间的转换关系： pxrem 12 12 / 16 = 0.75 14 14 / 16 = 0.875 16 16 / 16 = 1 18 18 / 16 = 1.125 2.em 子元素字体大小的em是相对于父元素字体大小,所以em的值并不是固定的，他会随着父元素字体大小改变而改变； 元素的width/height/padding/margin用em的话是相对于该元素的font-size。 3.vw/vh 全称是 Viewport Width 和 Viewport Height，视窗的宽度和高度，相当于 屏幕宽度和高度的 1%，不过，处理宽度的时候%单位更合适，处理高度的 话 vh 单位更好。 4.px px像素（Pixel）：相对长度单位。像素px是相对于显示器屏幕分辨率而言的。
css3中常见的单位：
1. px：绝对单位，页面按精确像素展示
2. em：相对单位，基准点为父节点字体的大小，如果自身定义了font-size按自身来计算（浏览器默认字体是16px），整个页面内1em不是一个固定的值。
3. rem：相对单位，可理解为”root em”, 相对根节点html的字体大小来计算，CSS3新加属性，chrome/firefox/IE9+支持。
4. vw：viewpoint width，视窗宽度，1vw等于视窗宽度的1%。
5. vh：viewpoint height，视窗高度，1vh等于视窗高度的1%。
6. vmin：vw和vh中较小的那个。
7. vmax：vw和vh中较大的那个。
8. %:百分比
9.in:寸
10.cm:厘米
11.mm:毫米
12.pt:point，大约1/72寸
13.pc:pica，大约6pt，1/6寸
14.ex：取当前作用效果的字体的x的高度，在无法确定x高度的情况下以0.5em计算(IE11及以下均不支持，firefox/chrome/safari/opera/ios safari/android browser4.4+等均需属性加么有前缀)
15.ch:以节点所使用字体中的“0”字符为基准，找不到时为0.5em(ie10+,chrome31+,safair7.1+,opera26+,ios safari 7.1+,android browser4.4+支持)
其中用的最多的单位是px、em、rem，这三个的区别是：
px是固定的像素，一旦设置了就无法因为适应页面大小而改变。
em和rem相对于px更具有灵活性，他们是相对长度单位，意思是长度不是定死了的，更适用于响应式布局。
对于em和rem的区别一句话概括：em相对于父元素，rem相对于根元素。
rem中的r意思是root（根源），这也就不难理解了。
浏览器的默认的font-size是16px，1rem默认就等于16px。（chrome最小字体为12px）
设置的font-size来改变rem尺寸：
html{ font-size: 20px}.box{ font-size: 1rem; width:20rem; height:10rem; background-color:purple;
}
em/rem：用于做响应式页面，不过我更倾向于rem，因为em不同元素的参照物不一样（都是该元素父元素），所以在计算的时候不方便，相比之下rem就只有一个参照物（html元素），这样计算起来更清晰。
关于vh/vw与%区别：
vh和vw大小是相对于视口的高度和宽度，而不是父元素的，%单位是相对于包含它的最近的父元素的高度和宽度。上一篇：已经是第一篇
下一篇：css 文字镂空
评论区
共 0 条评论
- 这篇文章还没有收到评论，赶紧来抢沙发吧~
【随机内容】
-
2023-08-22
-
2022-10-26
-
2023-12-23
-
2023-12-23
