em px

来源：互联网发布：校园网络管理系统编辑：程序博客网时间：2024/04/30 14:03

px：为像素单位。它是显示屏上显示的每一个小点，为显示的最小单位。它是一个绝对尺寸单位；

em：它是描述相对于应用在当前元素的字体尺寸，所以它也是相对单位。一般浏览器字体大小默认为16px，则2em=32px；

%：百分比，它是一个更纯粹的相对长度单位。它描述的是相对父元素百分值。如50%，则为父元素的一半。

注：em是相对于应用于当前元素的字体尺寸；而百分比则是相对于父类元素的尺寸。

.parent{            width: 200px; font-size: 18px;        }.parent1{            width: 400px; font-size: 18px;        }.em-demo{            width: 5em;        }

1、如果希望随着当前元素的字体尺寸而改变尺寸，使用em最佳，如：行高、字体大小。相反，如果是随着父类容器或者是整体页面布局而改变尺寸，则使用%更好，如元素高度和宽度设置。

2、只有在可预知的元素上使用绝对尺寸（icon、video）

设置Body的font-size

<body>默认字体是"16px"，也可以设置"10px"，即0.625em或62.5%

1em总是等于父类元素大小

        html{            font-size: 100%; // IE        }        body{            font-size: 1em;        }

公式转换-------PX to EM

1/父类元素的font-size*所需转换的像素值=em值

PixelsEMsPercentPoints6px0.375em37.5%5pt7px0.438em43.8%5pt8px0.5em50%6pt9px0.563em56.3%7pt10px0.625em62.5%8pt11px0.688em68.8%8pt12px0.75em75%9pt13px0.813em81.3%10pt14px0.875em87.5%11pt15px0.938em93.8%11px16px1em100%12pt17px1.063em106.3%13pt18px1.125em112.5%14pt

0 0