像素单位的区别。

2023-02-20 08:50:02html-css013

像素单位的区别。,第1张

大家好，我是IT修真院萌新分院的王寒，一枚正直，纯洁，善良的前端程序员。

1.背景介绍

传统的项目开发中，我们只会用到px、%、em这几个单位，它可以适用于大部分的项目开发，并且拥有比较良好的兼容性。但是你知道吗？从css3开始，浏览器对逻辑单位的支持又提升到了另外一个境界，增加了rem、vh、vw、vm等一些新的长度单位，我们可以利用这些新的单位开发出比较良好的响应式页面，随之覆盖多种不同分辨率的终端，包括移动设备等。现在让我们来看下这些长度单位有什么区别。

2.知识剖析

1、px

px就是pixel的缩写，意为像素。px就是一张图片最小的一个点，一张位图就是千千万万的这样的点构成的，比如常常听到的电脑像素是1024x768的，表示的是水平方向是1024个像素点，垂直方向是768个像素点。

2、em

参考物是父元素的font-size，具有继承的特点。如果自身定义了font-size按自身来计算（浏览器默认字体是16px），整个页面内1em不是一个固定的值。

3、rem

css3新单位，相对于根元素html（网页）的font-size，不会像em那样，依赖于父元素的字体大小，而造成混乱。

4、%

一般宽泛的讲是相对于父元素，但是并不是十分准确。 1、对于普通定位元素就是我们理解的父元素 2、对于position: absolute的元素是相对于已定位的父元素 3、对于position: fixed的元素是相对于ViewPort（可视窗口）

5、vw

css3新单位，viewpoint width的缩写，视窗宽度，1vw等于视窗宽度的1%。举个例子：浏览器宽度1200px, 1 vw = 1200px/100 = 12 px。

6、vh

css3新单位，viewpoint height的缩写，视窗高度，1vh等于视窗高度的1%。举个例子：浏览器高度900px, 1 vh = 900px/100 = 9 px。

7、vm

css3新单位，相对于视口的宽度或高度中较小的那个。其中最小的那个被均分为100单位的vm 举个例子：浏览器高度900px，宽度1200px，取最小的浏览器高度，1 vm = 900px/100 = 9 px。

3.常见问题

vh vw vm实际应用场景？

4.解决方案

vh vw是不包含页面滚动条的视窗宽度(innerwidth)，%包含了滚动条的宽度在里面了(outerwidth)。一般的情况下%就可以满足大部分自适应设计的需求，可以用height：100vh做一个高度占满屏幕的自适应，没有滚动条。用vw，vh设定的大小只和视窗大小有关，所以用来开发多种屏幕设备的应用用这个单位还是挺合适的。

5.编码实战

6.扩展思考

css还有哪些长度单位？

in:寸

cm:厘米

mm:毫米

t:point，大约1/72寸

pc:pica，大约6pt，1/6寸

1in = 2.54cm = 25.4 mm = 72pt = 6pc = 96px

7.参考文献

PX、EM、REM、%、VW、VH、VM等单位有什么区别？

8.更多讨论

css中font-size的单位有px、em、pt 用哪个哪个最好？

剖析

鸣谢

感谢大家观看

By 王寒

小课堂问题：

1.详解vm。

答案：请点击。

2.这些单位都是在什么情况下使用？

答案：请点击。

3.使用px的优点和缺点?

答案：请点击。

不行的，建议使用rem然后通过js改变html标签的font-size实现

例如rem设计稿像你一样用100，那就font-size: 5rem然后window添加事件监控设置window的最大宽度/100就是html标签的font大小

代码：

window.onresize = function () {

x = 100

document.documentElement.style.fontSize = (document.documentElement.clientWidth / x + document.documentElement.clientHeight / x)/2 + "px"}

并且其实没有必要的，就用width宽度即可，高度不用管的

【CSS】

vmin

视口高度和宽度之间的最小值的 1/100。

vmax

视口高度和宽度之间的最大值的 1/100。

使用CSS的vmin（兼容性一般般）可以是：

【p {

font-size: 8vm

font-size: 8vmin

}】

如果视口的宽度是300mm，高度是200mm，那么上述代码中h1元素的字号将为16mm，即(8x200（最小的）)/100，因为高度比宽度要小，所以计算的时候相对于高度。

使用CSS的vmin（兼容性超级一般般，IE11都不支持）可以是：

【p { font-size: 8vmax}】

如果视口的宽度是300mm，高度是200mm，那么上述代码中h1元素的字号将为24mm，即(8x300（最小的）)/100，因为高度比宽度要小，所以计算的时候相对于宽度。

参考资料：MOZ网页链接

px是pixel缩写，是基于像素的单位（屏幕上显示数据的最基本的点）。用像素定义的的文字、图片等会随屏幕的分辨率变化而变化。如果在定义字体大小时，使用px作为单位，分辨率调高，实际看到的文字就变“小”。

em是一个相对长度单位，最初是指字母M的宽度，故名em。现指的是字符宽度的倍数，用法类似百分比，如：0.8em，1.2em，2em等。通常1em=16px（一般浏览器默认的字体大小为16px）。

注：当用于指定字体大小时，em单位是指父元素的字体大小

百分与“em”类似，1em=100%。当前的字体大小等于100%,字体大小也是受父类影响。

rem是CSS3新增的一个相对长度单位，只相对根目录即HTML元素。所以可以在html标签上设置字体大小为标准，文档中的字体大小都会以此为参照。

如：

兼容性： IE9+，Firefox、Chrome、Safari、Opera 的主流版本都支持，为了兼容不支持 rem 的浏览器，我们需要在 rem 前面写上对应的 px 值，这样不支持的浏览器可以优雅降级。

PT是point(磅)缩写，是一种固定长度的度量单位,大小为1/72英寸（96dpi）。如果在web上使用pt做单位的文字，字体的大小在不同屏幕下一样（DPI精度一样），但在Word中使用pt相当方便。因为使用Word主要目的都不是为了屏幕浏览，而是输出打印。当打印到实体时，pt作为一个自然长度单位就方便实用了。

注：用在屏幕浏览（屏幕效果）时，pt和px都会随屏幕分辨率的变化而变化。用在打印（打印效果）时，使用pt在不同的屏幕分辨率或不同的DPI精度时显示大小一样，只是DPI精度越高的越清晰。

vw 相对于视区的宽度：视区宽度是100vw。

vh 相对于视区的高度：视区宽度是100vh。

注：视区”所指为浏览器内部的可视区域大小，即window.innerWidth/window.innerHeight大小，不包含任务栏标题栏以及底部工具栏的浏览器区域大小。部分浏览器可能不支持该度量单位。

1．in:英寸；

2．cm:厘米；

3．mm:毫米；

4．pc:pica，大约12pt，1/6英寸；

5．ex：取当前作用效果的字体的x的高度，在无法确定x高度的情况下以0.5em计算（部分浏览器支持，用的较少就不详述了）；

6．ch:以节点所使用字体中的“0”（零）字符为基准，找不到时为0.5em（部分浏览器支持，用的较少就不详述了）；

1．在网页开发时建议使用px、rem、em字体单位，一般浏览器默认字体大小是16px，可以先让根元素html为10px，如：html{font-size:62.5%}，然后使用em,或rem来设置个标签元素的字体大小；

2．如果是需要打印的文档就需要使用pt来作为字体单位，实际的打印字体清晰度会根据DPI/PPI（打印精度）变化。