017_CSS长度单位

最新推荐文章于 2021-09-01 22:32:09 发布

自由与束缚JavaJavaScript

最新推荐文章于 2021-09-01 22:32:09 发布

阅读量238

点赞数

分类专栏： css学习文章标签： css web前端

本文链接：https://blog.youkuaiyun.com/aihiao/article/details/109152560

版权

css学习专栏收录该内容

52 篇文章

订阅专栏

1. CSS有几种表示长度的不同单位。

2. 许多CSS属性接受"长度"值, 诸如: width、margin、padding、font-size等。

3. 长度是一个后面跟着长度单位的数字, 诸如: 10px、2em等。

4. 数字和单位之间不能出现空格。但是, 如果值为0, 则可以省略单位。

5. 对于某些CSS属性, 允许使用负的长度。

6. 长度单位有两种类型: 绝对单位和相对单位。

7. 绝对长度

7.1. 绝对长度单位是固定的, 用任何一个绝对长度表示的长度都将恰好显示为这个尺寸。

7.2. 不建议在屏幕上使用绝对长度单位, 因为屏幕尺寸变化很大。但是, 如果已知输出介质, 则可以使用它们, 例如: 用于打印布局(print layout)。

7.3. 像素(px)是相对于观看设备的。对于低dpi的设备, 1px是显示器的一个设备像素(点)。对于打印机和高分辨率屏幕, 1px表示多个设备像素。

8. DPI和PPI

8.1. dpi(Dots Per Inch)指每一英寸长度中, 取样、可显示或输出点的数目。

8.2. 如果一台打印机的分辨率是4800×1200dpi, 那么意味着在X方向(横向)上, 两个墨点最近的距离可以达到1/4800英寸; 在Y方向(纵向)上, 两个墨点的距离可以达到1/1200英寸。

8.3. 例如HP喷墨打印机最高标称分辨率是4800×1200dpi, 这意味着在纸张的X方向(横向)上, 每一英寸长度上理论上可以放置4800个墨点。但是如果真的在普通介质的一英寸上放置全部的4800个墨点, 会发生什么情况呢?纸张对墨水的吸收过饱和, 墨水连成一片, 反而使分辨率下降。所以"理论"点数, 是指打印机能够达到的能力极限, 但是实现起来需要依靠纸张的配合, 如果采用专用纸张, 便可达到更好的性能, 在每个英寸上放置更多的独立墨点, 如果使用纸张不能支持选定的最高分辨率, 就会出现相邻的墨点交融联成一片的情况, 从而影响打印效果。

8.4. dpi早期是印刷上的记量单位, 意思是每英寸上, 所能印刷的网点数(Dot Per Inch)。但随着数字输入, 输出设备快速发展, 大多数的人也将数字影像的解析度用DPI表示, 但较为严谨的人可能注意到, 印刷时计算的网点(Dot)和电脑显示器的显示像素(Pixel)并非相同, 所以较专业的人士, 会用PPI(Pixel Per Inch)表示数字影像的解析度, 以区分二者。

8.5. ppi(pixels per inch)是图像分辨率的单位, 图像ppi值越高, 画面的细节就越丰富, 因为单位面积的像素数量更多, 数码相机拍出来的图片因品牌或生产时间不同可能有所不同, 常见的有72ppi(web上使用的图片都是72ppi), 180ppi和300ppi。

8.6. ppi和dpi确实是两个概念, 但是有些事情是约定成俗的, 图片的ppi无法反映这张图片能在冲印店得到的冲印质量。在冲印店里只用dpi, 只要知道你图片的像素和你所需要印制的尺寸, 这两个要素构成了dpi。

8.7. 打印尺寸、图像的像素数与打印分辨率之间的关系可以利用下列的计算公式加以表示:

8.7.1. 图像的横向像素数 = 打印横向分辨率 × 打印的横向尺寸;

8.7.2. 图像的竖向像素数 = 打印竖向分辨率 × 打印的竖向尺寸;

8.7.3. 图像的横向像素数 / 打印横向分辨率 = 打印的横向尺寸;

8.7.4. 图像的竖向像素数 / 打印竖向分辨率 = 打印的竖向尺寸。

8.7.5. 例如: 希望打印照片的尺寸是4*3inch, 而打印分辨率横向和竖向都是300dpi, 则需要照相机采集的像素数至少为(300 * 4) * (300 * 3) = 1080000像素, 约一百万像素。

9. 物理像素(device pixels)

9.1. 对于一个款型的设备来说, 物理像素的大小是固定的, 在设备的设计之初就已经被确定好了。

9.2. 上图放大的这一块区域, 我们可以看到有很多重复的单元, 每个单元均由红、绿、蓝三原色组成。我们称: 一组三原色组成的一块区域为一个物理像素。不同类型的设备, 三原色的形状和布局会存在一定的差异。并且, 不同款型的设备之间, 物理像素的大小也会有区别。

10. 物理分辨率是水平与竖直物理像素个数的乘积。

11. 显示分辨率(也叫像素分辨率)

11.1. 我们平常所说的显示器分辨率, 一般指桌面设定的显示分辨率, 而不是物理分辨率。

11.2. 现在液晶显示器成为主流, 它只有在二者相等时显示效果最佳, 所以现在我们的桌面分辨率几乎总是与显示器的物理分辨率一致了。一台物理分辨率为1280×1024的液晶显示器, 在默认情况下, 桌面显示的分辨率也是1280×1024px, 这个时候是最清晰的; 我们可以设定桌面显示分辨率为800×600px, 非原始分辨率必须通过在液晶显示屏上拟合重新取样来实现, 要使用插值算法, 这种情况下可能会让显示屏看起来破碎或模糊; 物理分辨率为1280×1024液晶显示器可能无法完全显示1600×1200px的分辨率, 因为物理三元素组不够。

11.3. 自己电脑显示屏的多个显示分辨率

11.4. 推荐的分辨率就是显示屏的物理分辨率。推荐使用显示分辨率和物理分辨率相同。

12. 设备像素(device pixel)

12.1. 显示器屏幕实际上是由一个一个"点"组成的, 这些"点"就是设备像素。使用推荐的显示分辨率, 设备像素和物理像素相同。

12.2. 需要注意的是, device pixel实际是可以"变化"的, 当你降低设备分辨率时, 一个"点"就需要更多的三元素组来组成, 此时"点"的物理尺寸就增大了。

12.3. 求自己台式机显示屏的ppi和设备像素

12.3.1. 屏幕实际尺寸21.5英寸。是对角线的长度。

12.3.2. 屏幕宽高实际尺寸: 476mm*268mm。

12.3.3. 屏幕显示分辨率1920 * 1080(推荐分辨率)。

12.3.4. 屏幕ppi的计算

12.3.5. 设备像素: 1in / 102ppi = 25.4mm / 102ppi = 0.249mm

12.4. 求自己笔记本显示屏的ppi和设备像素

12.4.1. 屏幕实际尺寸13.3英寸。是对角线的长度。

12.4.2. 屏幕宽高实际尺寸: 286mm*179mm。

12.4.3. 屏幕显示分辨率2560 * 1600(推荐分辨率)。

12.4.4. 屏幕ppi的计算

12.4.5. 设备像素: 1in / 227ppi = 25.4mm / 227ppi = 0.1119mm

12.5. 改变自己台式机显示屏的分辨率后, 求ppi和设备像素

12.5.1. 屏幕实际尺寸21.5英寸。是对角线的长度。

12.5.2. 屏幕宽高实际尺寸: 476mm*268mm。

12.5.3. 屏幕显示分辨率1600 * 900。

12.5.4. 屏幕ppi的计算

12.5.5. 设备像素: 1in / 85ppi = 25.4mm / 85ppi = 0.2988mm

12.6. 由于不同的设备屏幕显示分辨率和尺寸可能不一样, 所以设备上物理像素(一般情况下物理像素和设备像素一样大小)的大小也就不一样。但是对于CSS来说, 它希望在所有的设备上元素的显示效果看起来都是差不多的。

12.7. 那怎么才能让同一元素在不同的设备上显示的效果差不多呢?w3c提出了一个概念, 也就是下面将要介绍的参考像素(reference pixel)。

13. 参考像素(reference pixel)

13.1. 参考像素即为从一臂之遥看解析度为96dpi(太多现有内容依赖于96dpi的假设, 而打破该假设会破坏内容)的设备输出时, 1个设备像素所对应的视角, 这个角就是CSS参考像素, 没错CSS参考像素其实是一个角。这个视角的大小大概是0.0213度, (1/96)in / (28in * 2 * PI / 360deg) = 0.0213度。

13.2. 成人的手臂大约是28英寸。

13.3. 因此, 也可以说1px对应于大约0.26毫米(1/96英寸)。

14. CSS像素

14.1. 建议CSS像素单位参考最接近参考像素的整数个设备像素。

15. 像素例子

15.1. 自己台式代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>像素长度单位</title>
		
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}
			div {
				width: 1920px;
				height: 500px;
				background-color: red;
			}
		</style>
	</head>
	<body>
		<div></div>
	</body>
</html>

15.2. 自己台式机上运行项目

15.3. 自己台式机屏幕实际尺寸21.5英寸, 是对角线的长度。屏幕显示分辨率1920 * 1080(推荐分辨率, 同时也是物理分辨率)。屏幕ppi是102ppi。设备像素: 1in / 102ppi = 25.4mm / 102ppi = 0.249mm。1920CSS像素, 刚好铺满整个屏幕, 说明1个CSS像素 = 设备像素(物理像素) = 0.249mm。

15.4. 自己笔记本代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>像素长度单位</title>
		
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}
			div {
				width: 1280px;
				height: 500px;
				background-color: red;
			}
		</style>
	</head>
	<body>
		<div></div>
	</body>
</html>

15.5. 自己笔记本上运行项目

15.6. 自己笔记本屏幕实际尺寸13.3英寸, 是对角线的长度。屏幕显示分辨率2560 * 1600(推荐分辨率, 同时也是物理分辨率)。屏幕ppi是227ppi。设备像素: 1in / 227ppi = 25.4mm / 227ppi = 0.1119mm。1280CSS像素, 刚好铺满整个屏幕, 说明1个CSS像素 = 2设备像素(物理像素) = 0.2238mm。

16. 毫米,厘米,英寸,点和派卡例子

16.1. 代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>毫米,厘米,英寸,点和派卡</title>
		
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}
			#mm {
				width: 100mm;
				height: 100mm;
				background-color: red;
				float: left;
			}
			#cm {
				width: 10cm;
				height: 10cm;
				background-color: green;
				float: left;
			}
			#in {
				width: 5in;
				height: 5in;
				background-color: blue;
				float: left;
			}
			#pt {
				width: 360pt;
				height: 360pt;
				background-color: fuchsia;
				float: left;
			}
			#pc {
				width: 30pc;
				height: 30pc;
				background-color: gray;
				float: left;
			}
		</style>
	</head>
	<body>
		<div id="mm">100mm * 100mm</div>
		<div id="cm">10cm * 10cm</div>
		<div id="in">5in * 5in</div>
		<div id="pt">360pt * 360pt</div>
		<div id="pc">30pc * 30pc</div>
	</body>
</html>

16.2. 效果图

17. 相对长度

17.1. 相对长度单位规定相对于另一个长度属性的长度。使用相对单位的样式表可以更轻松地从一种输出环境扩展到另一种输出环境。

17.2. em和rem单元可用于创建完美的可扩展布局。

17.3. 视口(Viewport)等于浏览器窗口的尺寸。如果视口宽50厘米, 则1vw = 0.5cm。

18. 相对于视口宽度和高度, 相对于较小和较大视口尺寸例子

18.1. 代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>相对于视口宽度和高度, 相对于较小和较大视口尺寸</title>
		
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}
			#vw-vh {
				width: 50vw;
				height: 50vh;
				background-color: red;
			}
			#vmin {
				width: 20vmin;
				height: 20vmin;
				background-color: green;
				float: left;
			}
			#vmax {
				width: 20vmax;
				height: 20vmax;
				background-color: blue;
				float: left;
			}
		</style>
	</head>
	<body>
		<div id="vw-vh">
			<p>屏幕实际尺寸: 476mm*268mm</p>
			<p>测量屏幕尺寸: 508mm*286mm</p>
			<p>浏览器最大化: 视口宽度508mm, 视口高度257mm</p>
			<p>width: 50vw = 508mm * 0.01 * 50 = 254mm</p>
			<p>height: 50vh = 257mm * 0.01 * 50 = 128.5mm</p>
		</div>
		<div id="vmin">20vmin * 20vmin</div>
		<div id="vmax">20vmax * 20vmax</div>
	</body>
</html>

18.2. 效果图

19. %,em和rem

19.1. 代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>%相对于父元素, em相对于元素字体大小和rem相对于根元素字体大小</title>
		
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}
			html {
				font-size: 32px;
			}
			div {
				font-size: 24px;
				width: 10em;
				height: 10rem;
				background-color: red;
			}
			p {
				width: 50%;
				height: 50%;
				background-color: blue;
			}
		</style>
	</head>
	<body>
		<div><p></p></div>
	</body>
</html>

19.2. 效果图