CSSunitpxremem
时间：2023-03-30 23:02:32
CSS
单位转换工具点mepxpx是虚拟长度单位，是计算机系统的数字图像长度单位。如果px要转换成物理长度，需要指定精度DPI（DotsPerInch，像素每英寸），扫描和打印时一般都有DPI选项。Windows系统默认为96dpi，Apple系统默认为72dpi。特性IE无法调整以px为单位的字体大小（缩放）。大部分国外网站都可以调整，因为他们使用em或rem作为字体单位。Firefox可以调整px和em、rem，但96%以上的中国网友使用IE浏览器（或内核）emem来指代字体高度，所有浏览器默认的字体高度都是16px。所以未经调整的浏览器都符合：1em=16px。那么12px=0.75em，10px=0.625em。为了简化字体大小转换，需要在css中的body选择器中声明Font-size=62.5%，使得em值16px*62.5%=10px，所以12px=1.2em，10px=1em，也也就是说你只需要将你原来的px值除以10，然后换成em为单位即可。特性1em指的是一个字体的大小，会继承父元素的字体大小，所以不是固定值。任何浏览器的默认字体大小都是16px。所以12px=0.75em。在实际应用中，为了转换方便，样式通常设置如下：body{font-size:62.5%;}这样，1em=10px。常用的1.2em就是12px。中文文章格式，每段开头必须有2个空格。如果以px为单位，12px的字体就需要24px，以此类推，但是对于em就比较简单了。p{text-indent:2em;}注意点标签的嵌套字体增加em来确定父元素的font-size属性的字体高度。那么在多层嵌套下就会出现1.2em*1.2em=1.44em的问题。如：Iamtext1Iamtext2
在上面的例子中'Iamtext2'会比'Iamtext大1'因为p的font-size属性是根据1em=12px字体高度来计算自己内部的em值的：/*1em=16px->calculated1em=10px*/body{font-size:62.5%;}/*1em=10px->计算出的1em=12px*//*容器中的字体将为12px*/.container{font-size:1.2em;}/*1em=12px->1em=14.4px经过计算*//*p中的字体将为14.4px*/.containerp{font-size:1.2em;所以如果要在p中使用相同的字号，不能设置为1.2em，只能设置为1em。12px的汉字在IE中太大了。12px（1.2em）汉字不等于IE中12px直接定义的字号，而是稍大一些。只需要在bodyselector中将62.5%改为63%即可正常显示。原因可能是IE在处理汉字时，浮点值的精度有限。这种现象只出现在12px的汉字，英文不存在这种现象。body{font-size:63%;}remrem是CSS3中新的相对单位（rootem，rootem）。这个单位和em的区别在于使用rem是相对于HTML根元素而言的。只要根元素不修改font-size属性，rem的期望大小就不会改变，而em是相对于父元素的font-size设置的期望大小。可以避免em字号逐层复合的连锁反应。目前，除IE8及更早版本外，所有浏览器均支持rem。对于不支持的浏览器，解决办法也很简单，就是多写一个绝对单元语句。这些浏览器忽略使用rem设置的字体大小。p{字体大小：14px；font-size:.875rem;}优势不会出现在像em这样1.2em*1.2em=1.44em的情况下，因为rem是相对于html的font-size设置的，而em是相对于font-size
Iamtext1Iamtext2
必须设置htmlcss样式，否则会按照默认的1rem=16px。缺点CSS3是新特性，所以只有支持C3的浏览器才兼容。解决方案低版本浏览器使用px，高版本使用rem。
