一文搞懂CSS中的字体单位大小(px,em,rem...)
CSS长度单位
- 绝对长度单位。 绝对长度单位表示为一个固定的值，不会改变。不利于页面渲染。
- in,英寸
- cm, 里面
- mm, 毫米
- pt
- pc
- 相对长度单位。 其长度单位会随着它的参考值的变化而变化。
- px,像素
- em,元素的字体高度
- %,百分比
- rem,根元素的font-size
- vw,视窗宽度，1vw=视窗宽度的1%
- vh,视窗高度，1vh=视窗高度的1%
物理像素(设备像素)
比如有一个图片，细分，最小单位就是像素。也就是说，图片由许多的像素构成。像素是小方块，这些小方块都有一个明确的位置和被分配的色彩数值，小方格颜色和位置就决定该图像所呈现出来的样子。
一个设备生产出来，它们的像素就已经确定了。iPhone5的分辨率是640x1136px,代表屏幕由640行，1136列像素小方块组成。
1.为了理解像素和避免与CSS像素混淆，
2.可以将物理像素当做物理小方块。
3.比如iPhone5的像素是640X1136px,可以当做640*1136个小方块。分辨率
也叫做解析度，解像度。可以从显示分辨率与图像分辨率两个方向来分类。
- 屏幕分辨率。是屏幕图像的精密度，是指显示器所能显示的像素有多少，即显示器可以可以显示的小方块有多少个。
- 显示器的可显示的小方块越多，画面就越精细，同样的屏幕区域内能显示的信息也越多
- 可以把整个图像想象成是一个大型的棋盘，而分辨率的表示方式就是所有经线和纬线交叉点的数目。棋盘的小方块越多，可以放的棋子就越多。
- 显示分辨率一定的情况下，显示屏越小图像越清晰，反之，显示屏大小固定时，显示分辨率越高图像越清晰。(小方块一样多的情况下，显示屏越小越清晰；屏幕大小一样大的时候，小方块越多图形越清晰)
CSS像素px
CSS像素的单位也叫做px。它是图像显示的基本单元，既不是一个确定的物理量，也不是一个点或者小方块，而是一个抽象概念。所以在谈论像素时一定要清楚它的上下文！
- 为了保证阅读体验一致，CSS可以自动在不同设备之间可以调节。即一份代码可以在不同的大小的设备之间显示，并且可以保证阅读体验一致。
- 默认情况下一个CSS像素应该是等于一个物理像素的宽度。
- 但是在高PPI的设备上，CSS像素甚至在默认状态下就相当于多个物理像素的尺寸。比如iPhone的屏幕对比一般的手机屏幕会看起来更精细清晰一些。
- 在浏览器上通过
ctrl +/-可以扩大缩小屏幕，其实就是屏幕分辩率的调低/调高。ctrl +屏幕放大，分辨率降低。 - iPhone6,7,8都是两倍屏手机，即一个CSS像素等于2物理像素。iPhone6Plus等是三倍屏手机，一个CSS像素等于3物理像素。
- 以iPhone6为例，设计稿给出一个图片宽高为40*40。在实际开发中要除以2，宽高要写成20x20。因为iPhone6是两倍屏手机。
px和pt
先搞清基本概念：px就是表示pixel，像素，是屏幕上显示数据的最基本的点；而pt就是point，是印刷行业常用单位，等于1/72英寸。
这样很明白，px是一个点，它不是自然界的长度单位，谁能说出一个“点”有多长多大么？可以画的很小，也可以很大。如果点很小，那画面就清晰，我们称它为“分辨率高”，反之，就是“分辨率低”。所以，“点”的大小是会“变”的，也称为“相对长度”。
pt全称为point，但中文不叫“点”，查金山词霸可以看到，确切的说法是一个专用的印刷单位“磅”，大小为1/72英寸。所以它是一个自然界标准的长度单位，也称为“绝对长度”。
因此就有这样的说法，在网页设计中，pixel是相对大小，而point是绝对大小。
em
em是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸,浏览器字体默认为16px。
- 所以，1em = 16px。默认情况下。
如何高效使用em呢
- body里声明font-size:62.5%。即全局声明
1em = 16px * 62.5% = 10px - 之后可以把
em当做px使用。当然此时，1em = 10px - 如果在父容器里说明了
font-size:20px,那么在子容器里的1em就等于20px。
rem
rem单位是相对于字体大小的html元素，也称为根元素。
html {
font-size: 10px; /* 不建议设置 font-size: 62.5%; 在 IE 9-11 上有偏差，具体表现为 1rem = 9.93px。 */
}
.sqaure {
width: 5rem; /* 50px */
height: 5rem; /* 50px */
}em与rem
- rem是相对于根元素（html）的字体大小，而em是相对于其父元素的字体大小。
- em最多取到小数点的后三位
<style>
html{ font-size: 20px; }
body{
font-size: 1.4rem; /* 1rem = 28px */
padding: 0.7rem; /* 0.7rem = 14px */
}
div{
padding: 1em; /* 1em = 28px */
}
span{
font-size:1rem; /* 1rem = 20px */
padding: 0.9em; /* 1em = 18px */
}
</style>
<html>
<body>
<div>
<span></span>
</div>
</body>
</html>
上面的例子中，发现了一个有意思的情况。em 会层层继承父元素的字体大小，很容易造成字体大小的混乱。所以以后用rem会更好。
rpx
rpx 是微信小程序解决自适应屏幕尺寸的尺寸单位。微信小程序规定屏幕的宽度为750rpx。
无论是在iPhone6上面还是其他机型上面都是750rpx的屏幕宽度，拿iPhone6来讲，屏幕宽度为375px，把它分为750rpx后， 1rpx = 0.5px = 1物理像素。
vw 和 vh
vw,视窗宽度，1vw=视窗宽度的1%vh,视窗高度，1vh=视窗高度的1%- 如果浏览器的高是900px,1vh求得的值为9px。同理，如果显示窗口宽度为750px,1vw求得的值为7.5px。
vmin 和 vmax
- vmin和vmax是相对于视口的高度和宽度两者之间的最小值或最大值。
- 浏览器的高为1100px、宽为700px，那么1vmin就是7px，1vmax就是11px
- 浏览器的高为800px，宽为1080px，那么1vmin也是8px，1vmax也是10.8px
- vmin取宽度高度两者更小者/100
- vmax取宽度高度两者更大者/100
哪些地方可以用到
- 一个总是在屏幕上可见的元素。使用高度和宽度设置为低于100的vmin值将可以实现这个效果。
- 一个总是覆盖可视窗口的正方形(一直接触屏幕的四条边)
.box {
height: 100vmax;
width: 100vmax;
}转载自 https://blog.csdn.net/llll789789/article/details/97687288；https://www.cnblogs.com/John-fei/p/7081759.html
posted on 2020-11-10 15:33 一只向上爬的小蜗牛 阅读(1443) 评论(0) 编辑 收藏 举报
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· Linux系列：如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
· Linux系列：如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列（二）：开始使用ML.NET
· 被坑几百块钱后，我竟然真的恢复了删除的微信聊天记录！
· 【自荐】一款简洁、开源的在线白板工具 Drawnix
· 没有Manus邀请码？试试免邀请码的MGX或者开源的OpenManus吧
· 园子的第一款AI主题卫衣上架——"HELLO! HOW CAN I ASSIST YOU TODAY
· 无需6万激活码！GitHub神秘组织3小时极速复刻Manus，手把手教你使用OpenManus搭建本