css px em rem,css中rem 和 px的区别

　　概念介绍:

　　1、px (pixel，像素)：是虚拟长度单位，是计算机系统的数字图像长度单位。如果px要转换成物理长度，需要指定精度DPI(每英寸点数)。扫描打印时一般都有DPI。Windows系统默认96dpi，苹果系统默认72dpi。

　　2、em(相对长度单位，相对于当前对象中文本的字体大小):是相对长度单位，原本指字母M的宽度，故名em。现在指字符宽度的倍数，用法类似于百分数，如：0.8em，1.2em，2em等。一般1em=16px。

　　3、pt (point，磅)：是长度的物理单位，指72/1英寸。点=1/72(英寸)，像素=1/dpi(英寸)

　　4、rem（root em，根em）：是CSS3中一个新的相对单位，这个单位引起了广泛的关注。这个单元和em有什么区别？不同的是，当rem用于设置元素的字体大小时，它仍然是相对大小，但它只是HTML根元素。这个单位可以被描述为结合了相对大小和绝对大小的优点。它不仅可以通过修改根元素来按比例调整所有字体大小，还可以避免字体大小层层复合的连锁反应。目前除了IE8及更早版本，所有浏览器都已经支持rem。对于不支持的浏览器，解决方法很简单，就是写一个绝对单位语句。这些浏览器会忽略rem设置的字体大小。

　　1、em与px的问题

　　px是何物？

　　像素(Pixel)。相对长度单位。像素px与显示器的屏幕分辨率相关。(引自CSS2.0手册)

　　Em是相对长度的单位。相对于当前对象中文本的字体大小。如果内联文本的当前字体大小没有被人为设置，它是相对于浏览器的默认字体大小的。(引自CSS2.0手册)

　　PX特点

　　1.IE无法调整那些以px为单位的字体大小；

　　2.国外网站因为用em或rem作为字体单位，大多可以调整；

　　3.火狐可以调整px和em，rem，但是96%以上的中国网民使用IE浏览器(或者内核)。

　　em是何物？

　　Em是指字体高度，任何浏览器的默认字体高度都是16px。所以所有未调整的浏览器都符合：1em=16px。那么12px=0.75em，10px=0.625em.为了简化font -size的转换，需要在css中的body selector中声明Font-size=62.5%，这样就使得em值为16px*62.5%=10px，这样12px=1.2em，10px=1em，也就是说，你只需要将你原来的px值除以10，然后用em作为单位替换即可。

　　em特点：

　　Em是指字体的大小，它继承了父元素的字体大小，所以它不是一个固定值。任何浏览器的默认字体大小都是16px。因此，12px=0.75em.在实践中，为了便于转换，样式通常设置如下：

　　html { font-size:62.5%；}

　　这样，1em=10px。常用的1.2em理论上是12px。不过这个转换在IE浏览器下无效，1.2em会比12px稍大。解决方法是将html标签样式中的62.5%改为63%，即：

　　html { font-size:63%；}

　　在中文文章中，通常在段落的开头留出两个空格。如果以像素为单位，12px字体需要空出24px，14px字体需要空出28px…….这种转换是很没用的。如果使用em单元，这个问题很容易解决。一个字的大小是1em，那两个字的大小是2em。因此，只需这样定义它：

　　p { text-indent:2em；}

　　em和px两种字体单位的区别

　　字体单元应该用em而不是px。原因很简单，它支持IE6下的字体缩放。在页面中按下ctrl滚轮，px字体的网站没有响应。Px是绝对单位，不支持IE的缩放，em是相对单位。

　　当我调整这个博客时，我发现不仅字体，而且行高和垂直高度都是em。缩放时确保完整性。

　　em有如下特点：

　　1.em的值不是固定的；

　　2.em将继承父元素的字体大小。

　　em重写步骤：

　　1.Font-size=62.5%在正文选择器中声明；

　　2.把你原来的px值除以10，然后换成em为单位；

　　简单来说，如果只有以上两步能解决问题，也许就没人用px了。经过以上两步，你会发现你的网站的字体大小超乎想象。因为em的值不是固定的，它将继承父元素的大小，所以您可以在内容的div中将字体大小设置为1.2em，即12px。然后你把选择器P的字体大小设置为1.2em，但是如果P是content的子体，那么P的字体大小就不是12px，而是1.2em=1.2 * 12px=14.4px这是因为content的字体大小设置为1.2em，继承了其父元素体的大小，即16px * 62.5% * 1.2=12px，而P是其子体，em继承了content的字体高度，即12px。所以p的1.2em不再是12px，而是14.4px

　　3.重新计算那些放大字体的em值。避免重复声明字号，即避免上述1.2 * 1.2=1.44的现象。比如你在#content中声明字体大小为1.2em，那么当你声明P的字体大小时，只能是1em，不能是1.2em，因为这个em不是另一个em，因为继承了#content的字体高度，所以变成了1em=12px。

　　IE中的12px汉字：

　　当em转换完成后，还发现一个奇怪的现象，即上述方法得到的12px(1.2em)汉字并不等于IE中12px直接定义的字体大小，而是略大。你只需要在正文选择器里把62.5%改成63%就可以正常显示了。原因可能是IE处理汉字时，浮点值的精度有限。这种现象只出现在12px的汉字中，在英语中是不存在的。解决方法是将style.css中的62.5%替换为63%。

　　2、rem特点

　　Rem是CSS3中一个新的关系单位(root em ),引起了广泛的关注。这个单元和em有什么区别？不同的是，当rem用于设置元素的字体大小时，它仍然是相对大小，但它只是HTML根元素。这个单位可以说是结合了相对大小和绝对大小的优点。它不仅可以通过修改根元素来按比例调整所有字体大小，还可以避免逐层复合字体大小的连锁反应。目前除了IE8及更早版本，所有浏览器都已经支持rem。对于不支持的浏览器，解决方法很简单，就是写一个绝对单位语句。这些浏览器会忽略rem设置的字体大小。

　　示例：

　　p { font-size:14px；font-size: 875 rem；}

　　注意：

　　用什么字体单位主要由你的项目决定。如果您的用户群使用最新版本的浏览器，建议使用rem。如果要考虑兼容性，那就用px，或者两者都用。

　　3、字体换算表

　　用于指定序列号的字符和数字

　　元素铂的符号

　　像素

　　全身长的

　　楚昊

　　42磅

　　56px

　　3.5毫米

　　初晓

　　36磅

　　48px

　　3em

　　34pt

　　45px

　　2.75毫米

　　32磅

　　42px

　　2.55毫米

　　30磅

　　40px

　　2.45毫米

　　29磅

　　38px

　　2.35毫米

　　28磅

　　37px

　　2.3em

　　27磅

　　36px

　　2.25毫米

　　一号

　　26点钟方向

　　35px

　　2.2位于

　　25点

　　34px

　　2,125em

　　小一

　　24点钟方向

　　32px

　　2位于

　　二号

　　22点整

　　29px

　　1.8位于

　　20点钟方向

　　26px

　　1.6在

　　小二

　　18磅(18磅)

　　24px

　　1.5位于

　　17点

　　23px

　　1.45毫米

　　三号

　　16磅(消歧义)

　　22像素

　　1.4在

　　小三

　　15点钟方向

　　21px

　　1.3在

　　页：1

　　20px

　　1.25毫米

　　四号

　　14pt(消歧义)

　　19px

　　1.2在

　　页：1

　　18px

　　1,125em

　　13点整

　　17像素

　　2005年一月一日

　　小四

　　12点钟方向

　　16px

　　一个全身长的

　　11点钟方向

　　15px

　　中的0.95

　　五号

　　S7-1200可编程控制器

　　14px

　　0.875em

　　10磅(消歧义)

　　13像素

　　中的0.8

　　小五

　　9点钟方向

　　12像素

　　0.75毫米

　　8点钟方向

　　11像素

　　中的0.7

　　六号

　　S7-1200可编程控制器

　　10px

　　中的0.625

　　S7-1200可编程控制器

　　9px

　　0.55毫米

　　小六

　　S7-1200可编程控制器

　　8px

　　中的0.5

　　七号

　　S7-1200可编程控制器

　　7px

　　S7-1200可编程控制器

　　八号

　　5pt

　　6px

　　0.375em

　　关于css中px、em、rem、pt的特点和区别，以及转换的详细说明，本文到此为止。更多相关css px，em内容，请搜索之前的文章或者继续浏览下面的相关文章。希望你以后能支持我！

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。