CSS中常见的长度单位

CSS长度单位详解

1.CSS中常见的长度单位

名称英文全称中文名 相对/绝对长度 换算描述
%percentage百分比






相对
原长度*百分数 
pxpixel像素 长度由屏幕大小和其分辨率决定
emequal-M-width当前字体的大写字母“M”的宽度一般是1em=16px1em等于浏览器的默认字体尺寸
exequal-x-height当前字体的小写字母“x”的高度一般1ex=0.5*1emx-height通常是字体尺寸的一半
ininch英寸









绝对
1in=2.54cm一般用于描述显示器大小(对角线长度)
mmmillimeter毫米  
cmcentimeter厘米  
ptpoint1pt=1/72in≈0.3527mm磅一般为重量单位,但是在印刷行业可作为长度单位,用于描述字体的大小
pcpica派卡1pc=12pt, 6pc=1in=2.54cm 印刷行业用于描述字体的大小

注意:
(1)字体的尺寸指的是什么?
字体大小是指字在屏幕或印刷介质上表现出来的大小,将每个字看作方块,按方块的对角线长度计算大小。

(2)CSS中设置字体大小(font-size)请尽量使用em或者ex代替px,原因是用px做描述字体大小唯一的致命缺点就是在IE下无法用浏览器字体缩放的功能。

2. CSS3中新增的度量单位

(1)ch——字符0(零)的宽度;
(2)rem——根元素(html元素)的em;
(3)vw——viewpoint width,视窗宽度,1vw等于视窗宽度的1%;
(4)vh——viewpoint height,视窗高度,1vh等于视窗高度的1%;
(5)vmin——vw和vh中较小的那个。

注意:
(1)显然vw、vh、vmin是针对移动设备的,如果视窗大小变化了,这三个值也会跟着相应的变化。
(2)rem单位感觉就是px+em的变体,是否值得使用还要看你自己的取舍:没有px精确也没有em灵活。
如果没有定义font-size怎么办?
(3)浏览器支持情况。
rem,各浏览器基本都支持了, IE9+、FF3.6+、Chrome、Safari 5+、以及 Opera 11.6+。
vw、vh、vmin,浏览器支持并不乐观,IE9支持了,Chrome、Safari、Opera和Firefox还都不支持。

参考文献

[1]http://www.w3school.com.cn/cssref/css_units.asp
[2] http://zhidao.baidu.com/question/41363325.html
[3] pica和point百度百科
[4] http://www.cnblogs.com/wanghl-GIS/archive/2012/04/11/2443045.html

CSS 中支持多种长度单位,这些单位可以分为**相对长度单位**和**绝对长度单位**两大类。 ### 相对长度单位 相对长度单位的值不是固定的,它依赖于其他元素的属性值或视口的大小。常见的相对单位包括: - **em**:表示当前字体的大写字母“M”的宽度。通常 1em 等于浏览器的默认字体尺寸(一般是 16px),但它的值会根据当前元素的字体大小动态变化。例如,如果一个元素的字体大小设置为 20px,则 1em 就等于 20px [^2]。 - **ex**:表示当前字体的小写字母“x”的高度。通常情况下,1ex 约等于 0.5em [^2]。 - **ch**:表示 "0" 字符的宽度。它通常用于等宽字体,每个字符的宽度相同 [^3]。 - **rem**:与 em 类似,但它是相对于根元素(通常是 `<html>` 元素)的字体大小,而不是当前元素的字体大小。因此,它更稳定,不会因为父元素的字体大小而变化 [^1]。 - **vw** 和 **vh**:分别表示视口宽度和高度的百分比。1vw 等于视口宽度的 1%,1vh 等于视口高度的 1% [^3]。 - **vmin** 和 **vmax**:分别表示视口宽度和高度中较小或较大的值的百分比。例如,1vmin 等于视口宽度和高度中较小值的 1% [^3]。 ### 绝对长度单位 绝对长度单位的值是固定的,不依赖于环境。它们通常用于打印样式表或需要精确控制输出尺寸的场景。常见的绝对单位包括: - **px**(像素):是 CSS 中最常用的单位之一。1px 等于 1/96 英寸 [^3]。尽管它被认为是“绝对”单位,但在屏幕显示中,它的大小可能会受到屏幕分辨率和缩放设置的影响 [^5]。 - **in**(英寸):1in 等于 2.54 厘米 [^3]。它通常用于描述显示器的物理尺寸。 - **cm**(厘米)和 **mm**(毫米):1 厘米等于 10 毫米,1 英寸等于 25.4 毫米 [^4]。 - **pt**(点):1pt 等于 1/72 英寸,常用于印刷行业 [^4]。 - **pc**(派卡):1pc 等于 12pt,6pc 等于 1 英寸 [^4]。 ### 使用场景 - **相对单位**更适合响应式设计,因为它们可以根据视口大小或父元素的设置进行缩放,从而实现更灵活的布局。 - **绝对单位**主要用于需要精确控制输出的场景,例如打印样式表或固定尺寸的图像排版。 ### 示例代码 以下是一些使用不同长度单位CSS 示例: ```css /* 使用相对单位 */ .container { font-size: 2rem; /* 相对于根元素的字体大小 */ padding: 2em; /* 相对于当前元素的字体大小 */ } /* 使用绝对单位 */ .print-only { width: 8.5in; /* 8.5 英寸,适用于打印 */ margin: 1cm; /* 1 厘米 */ } /* 视口相关的单位 */ .fullscreen { height: 100vh; /* 100% 视口高度 */ width: 100vw; /* 100% 视口宽度 */ } ``` 这些单位的选择取决于设计需求和目标设备的特性。在现代网页设计中,`px`、`em`、`rem` 和 `vw/vh` 是最常用的单位,因为它们提供了良好的灵活性和兼容性 [^5]。 ---
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值