px、em、rem、%、vw、vh、vm这些单位的区别
2024-10-06 11:17:17
1.px
px
就是像素,也是我们现在经常使用的基本单位,比如常常听到的电脑像素是1024x768的,表示的是水平方向是1024个像素点,垂直方向是768个像素点。
2.em
em
参考物是父元素的font-size
,默认字体大小是16px,所以1em不是固定值,因为它会继承父元素的字体大小
3.rem
rem
参考物是相对于根元素,我们在使用时可以在根元素设置一个参考值即可,相对于em使用,减少很大运算工作量,例:html
大小为10px,12rem就是120px
4.%
% 是相对于父元素的大小设定的比率,position:absolute;
的元素是相对于已经定位的父元素,position:fixed;
的元素是相对可视窗口
5.vm
vm相对于视口的宽度。视口被均分为100单位
h1 {
font-size: 8vw;
}
再举个例子:浏览器宽度1200px, 1 vw = 1200px/100 = 12 px
6.vh
vm相对于视口的宽度。视口被均分为100单位
h1 {
font-size: 8vh;
}
再举个例子:浏览器高度900px, 1 vh = 900px/100 = 9 px
总结:
1.vw:1vw等于视口宽度的1%。
2.vh:1vh等于视口高度的1%。
但是使用起来兼容性很差,还是不推荐使用,目前用的很舒服的还是px和rem,
安利一对换算单位的网站,帮助更好的理解现在常用的px/em/rem之间的倍数关系:
http://pxtorem.com/ px 换算 rem
http://pxtoem.com/ px 换算 em
最新文章
- Recover data from reference electrode via EEGLab 用EEGLab恢复参考电极数据
- HTML5学习之跨文档传输消息(七)
- (转) vector的reserve和resize
- IDTHook 深入学习
- 3.emWin5.26(ucGui)VS2008 2-D图形库-基本绘图【Worldsing笔记】
- 关于python的环境变量问题
- 【转】VirtualBox下Ubuntu共享文件
- GCC内联汇编入门
- CSS中表示cellpadding和cellspacing的方法
- 关于mysql的自增
- YUI Array 之some(检测|any)
- tigervnc*
- HDU2586 How far away ?(LCA模板题)
- alpine-bash镜像制作
- 校内模拟赛 旅行(by NiroBC)
- 【JUC源码解析】CompletableFuture
- Calling async method synchronously
- scala VS python2 操作shell对比例子
- codeforces 894C - Marco and GCD Sequence - [有关gcd数学题]
- 2019“嘉韦思”杯RSA256题目wp