CSS长度单位合集

绝对长度单位

单位	英文全称	中文全称	转换	举例
pc	Picas	派卡	1pc = 16px	font-size:1pc;
pt	Points	点	1pt = 1.33px	font-size:1pt;
in	Inches	英寸	1in = 96px	font-size:1in;
q	quarter-millimeters	1/4毫米	1q = 1/4mm = 0.945px	font-size: 20q;
mm	Millimeters	毫米	1mm = 0.1cm = 3.78px	font-size: 10mm;
cm	Centimeters	厘米	1cm = 10mm = 37.8px	font-size: 1cm;

相对长度单位

单位	英文全称	中文全称	举例	说明
px	Pixels	像素	font-size:12px;	不同屏幕像素大小不同
vmin	/	/	font-size: 8vm;/*IE9*/、font-size: 5vmin;/*其他浏览器*/，视口的宽度是300mm，高度是200mm，h1元素的字号将为16mm，即(8×200)/100，	相对于视口的宽度或高度中较小的那个。其中最小的那个被均分为100单位的vmin
vmax	/	/	同vmin，取较大的那个font-size:12vmax;	相对于视口的宽度或高度中较大的那个。其中最大的那个被均分为100单位的vmax
vh	/	/	font-size: 8vh;视口的高度是200mm，则字号将为16mm，即(8×200)/100	相对于视口的高度。视口被均分为100单位的vh
vw	/	/	font-size:8vw;视口的宽度是200mm，那么元素的字号将为16mm，即(8×200)/100，	相对于视口的宽度，视口被均分为100单位的vw。(vw = px/屏幕的宽度*100)。(px = vw*屏幕的宽度/100)。获取屏幕的宽度：document.documentElement.clientWidth
em	/	/	父元素div{fontSize:16px;}子元素p{font-size:0.75em;}则=>“0.75 X 16px = 12px”,子元素为12px	此字体大小受从父元素继承过来的字体大小，除非显式重写与一个具体单位,为了简化font-size的换算，可以将body{Font-size=62.5%;}， 这样10px=1em
rem	/	/	根元素html{fontSize:16px;}子元素p{font-size:0.75rem;}则=>“0.75 X 16px = 12px”,子元素为12px	相对于根元素(即html元素)font-size计算值的倍数，为了简化font-size的换算，可以将body{Font-size=62.5%;}， 这样10px=1rem. rem=>px: px=根元素字体大小* rem 值
ex	/	/	font-size:1ex;	相对于字符小写“x”的高度。通常为字体高度的一半
ch	/	/	font-size:1ch;	相对于数字“0”的宽度

rem与em

1. rem使用：一切可扩展都应该使用 rem 单位
2. 通常不使用 em 单位控制字体大小
3. em的使用：设计组件
   按钮(用在按钮里面的字体图标，字体图标的大小跟按钮的文本大小有关)
   菜单(使用 em 字体大小的下拉菜单，第二个级别的菜单项文本大小取决于第一级字体大小,使用em 值设置导航菜单项的padding、 margin，line-height等值,他们使用的元素的字体大小应设置对rem单位，以保留的可扩展性)

4.始终使用 rem 单位做媒体查询

不要使用 em 或 rem :

1.布局中的列宽通常应该是 %，因此他们可以流畅适应无法预知大小的视区。 然而单一列一般仍然应使用 rem 值来设置最大宽度

.container { 
    width: 100%;
    max-width: 75rem;
}

这保持列的灵活，可扩展。又能防止变得太宽了

总结：

• rem 和 em 单位是由浏览器基于你的设计中的字体大小计算得到的像素值。
• em 单位基于使用他们的元素的字体大小。
• rem 单位基于 html 元素的字体大小。
• em 单位可能受任何继承的父元素字体大小影响
• rem 单位可以从浏览器字体设置中继承字体大小。
• 使用 em 单位应根据组件的字体大小而不是根元素的字体大小。
• 在不需要使用em单位，并且需要根据浏览器的字体大小设置缩放的情况下使用rem。
• 使用rem单位，除非你确定你需要 em 单位，包括对字体大小。
• 媒体查询中使用 rem 单位
• 不要在多列布局中使用 em 或 rem -改用 %。

本文地址：https://blog.csdn.net/Yueqin0512/article/details/109385833