px和em的区别

ゞ浴缸里的玫瑰 2022-05-18 10:00 167阅读 0赞

px像素（Pixel）。相对长度单位。像素px是相对于`显示器屏幕分辨率`而言的。

em是相对长度单位。相对于当前对象内文本的字体尺寸,`多理解父级设定font-size的尺寸`。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。

**任意浏览器的默认字体高都是16px。所有未经调整的浏览器都符合: 1em=16px。那么12px=0.75em,10px=0.625em。**

为了简化font-size的换算，需要在css中的body选择器中声明Font-size=62.5%，这就使em值变为 16px\*62.5%=10px, 这样12px=1.2em, 10px=1em, 也就是说只需要将你的原来的px数值除以10，然后换上em作为单位就行了。

注:在body里面注明 font-size:62.5%;

1.之后可以将em当px使用,x10就好,当然前提是父级标签里面没设定font-size,

2.一旦父级元素有设定字体大小, em前面数值x就相当于父级元素字体乘以x%

3.相对最临近父级元素,且可以一直往下叠加.

下面案例对比你可以看的更清楚px和 em的使用

<body style="font-size:62.5%;">
    
    <div style="width:200px; height:300px; margin-top:20px; border:1px solid #f00; font-size:2em; ">
      这里的文字是第一级的大小
        <div style="font-size:0.9em;">
      这里的文字是第二级的,相对第一级x90%;
            <p style="font-size:0.8em;">这里的文字是第三级的,相对第二级x80%</p>
        </div>
     </div>
    
     <div style="width:200px; height:300px; margin-top:20px; border:1px solid #f00; font-size:20px; ">
         这里的文字是第一级的大小
         <div style="font-size:18px;">
         这里的文字是第二级的
            <p style="font-size:14px;">这里的文字是第三级的</p>
         </div>
     </div>
    
     </body>

效果如图：  
![这里写图片描述][70]

[70]: /images/20220518/a3bbd219792d4d3b9fd15df9ac696845.png

发表评论取消回复

表情：

评论列表（有 0 条评论，167人围观）

还没有评论，来说两句吧...

相关阅读

相关 px和em的区别

相同点：px和em都是长度单位；异同点：px的值是固定的，指定是多少就是多少，计算比较容易。em得值不是固定的，并且em会继承父级元素的字体大小。浏览器的默认字

超、凢脫俗/ 2023年01月01日 13:55/ 0 赞/ 102 阅读

相关理解 px，em，rem 的区别和用法

px：px是固定的像素，他的大小不会因为屏幕的大小而进行改变的； em：相对长度，相对父元素的 font-size 的大小而做出改变的； rem：相对长度，rem 中的

红太狼/ 2022年12月23日 11:18/ 0 赞/ 140 阅读

相关 em和px的区别

px和em都是长度单位区别：px的值是固定的的，计算比较容易；em的值不是固定的，并且em会继承父级元素的字体大小注意：浏览器的默认字体高都是16px，所以未经调整的浏

Love The Way You Lie/ 2022年11月13日 00:53/ 0 赞/ 185 阅读

相关 css中单位px和em,rem的区别

国内的设计师大都喜欢用px，而国外的[网站][Link 1]大都喜欢用em和rem，那么三者有什么区别，又各自有什么优劣呢？

约定不等于承诺〃/ 2022年07月16日 02:12/ 0 赞/ 211 阅读

相关 css中单位px和em,rem的区别

国内的设计师大都喜欢用px，而国外的[网站][Link 1]大都喜欢用em和rem，那么三者有什么区别，又各自有什么优劣呢？ PX特点 1. IE无

￡神魔★判官ぃ/ 2022年05月19日 03:29/ 0 赞/ 199 阅读

相关 px和em的区别

px像素（Pixel）。相对长度单位。像素px是相对于`显示器屏幕分辨率`而言的。 em是相对长度单位。相对于当前对象内文本的字体尺寸,`多理解父级设定font-size的尺

ゞ浴缸里的玫瑰/ 2022年05月18日 10:00/ 0 赞/ 168 阅读

相关 px和em的区别

在如今这个提倡可用性设计以及用户体验设计的网络时代，CSS也是要一同参与其中的。大部分人在CSS代码编写中总是先对整体定义字体尺寸，中文情况下一般为 12px，而其实这样以来

爱被打了一巴掌/ 2022年04月21日 14:09/ 0 赞/ 143 阅读

相关 rem em px的区别

rem em px的区别 rem em px都是css中的相对长度单位 px 1px的值与屏幕分辨率有关例：当屏幕分辨率为72ppi时，此时1px=0.04

短命女/ 2021年11月29日 10:08/ 0 赞/ 266 阅读

相关 px和em的战争

好吧。我承认我标题党了。其实我就是想说px和em的区别，网上资料其实一堆堆，但是还不如自己试验总结的清楚。前端高手可能觉得这玩意简单，但是作为小猫，还是好好学一下。下面

淩亂°似流年/ 2021年10月20日 00:14/ 0 赞/ 273 阅读

相关 px、em、rem区别介绍

PX px像素（Pixel）。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。 PX特点 1. IE无法调整那些使用px作为单位的字体大小； 2.

￡神魔★判官ぃ/ 2021年09月29日 11:36/ 0 赞/ 355 阅读