em px

最新推荐文章于 2021-06-10 13:27:34 发布

Lo-ra

最新推荐文章于 2021-06-10 13:27:34 发布

阅读量304

点赞数

本文链接：https://blog.csdn.net/yana_loo/article/details/53391927

版权

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值

Pixels	EMs	Percent	Points
6px	0.375em	37.5%	5pt
7px	0.438em	43.8%	5pt
8px	0.5em	50%	6pt
9px	0.563em	56.3%	7pt
10px	0.625em	62.5%	8pt
11px	0.688em	68.8%	8pt
12px	0.75em	75%	9pt
13px	0.813em	81.3%	10pt
14px	0.875em	87.5%	11pt
15px	0.938em	93.8%	11px
16px	1em	100%	12pt
17px	1.063em	106.3%	13pt
18px	1.125em	112.5%	14pt