px,em,rem之间的比较

最新推荐文章于 2024-03-16 14:03:27 发布
最新推荐文章于 2024-03-16 14:03:27 发布
阅读量408 收藏
点赞数
分类专栏： css 文章标签： px em rem
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44138506/article/details/85061526
版权

px是大家最常用的应该知道怎么用。主要讲em和rem.说的不清楚的地方，可以把代码拷贝过去观察哦。代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>单位的换算</title>
</head>
<style>
    body{font-size: 12px;}  //我给body设置大小  观察em,rem
    .em1{font-size: 2em;}
    .em2{font-size: 2em;}
    .em3{font-size: 2em;}
    
    .rem1{font-size: 2rem}
    .rem2{font-size: 2rem}
    .rem3{font-size: 2rem}

    .hh{font-size: 24px;}
    .kk{font-size: 32px;}
</style>
<body>
    第一个,这里是body设置了12px;
    <br><hr>

    <div class="hh">第一个,这里设置了12px</div>
    <div class="em1">
        第一个,这里是2em
        <div class="em2">
            第二个,这里是2em
            <div class="em3">第三个,这里是2em</div>
        </div>
    </div>
    <br><hr>

    <div class="kk">第一个,这里设置了32px;</div>
    <div class="rem1">
        第一个,这里是2rem
        <div class="rem2">
            第二个,这里是2rem
            <div class="rem3">
                第三个,这里是2rem
            </div>
        </div>
    </div>
</body>
</html>

运行结果如下：

em:

我们能很清楚的观察到em跟随父级变化，

父级为12px,那么子级就是1em=12px;2em=24px;

上图父级为2em 相当于24px,那么子集的1em=24px,所以2em就相当于48px

所以上图rem为单位的子级字体逐渐增大

rem:

我们可以看到rem并没有随父级而变化，浏览器默认根元素为16px,所以2rem大小相当于32px.

有一部分人可能不知道什么是根元素，其实根元素就是<html></html>元素，我们如果设置html{font-size:12px;}那么1rem=12px;2rem=24px;

 

 

寄语紫涵
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
px、rem、em的区别与联系
XinKun的博客
02-26 1万+
一、区别： 1. px是固定的像素，一旦设置了就无法因为适应页面大小而改变。 2. em和rem相对于px更具有灵活性，他们是相对长度单位，意思是长度不是定死了的，更适用于响应式布局。 3.em是相对于其父元素来设置字体大小的，一般都是以<body>的“font-size”为基准。这样就会存在一个问题，进行任何元素设置，都有可能需要知道他父元素的大小。而rem是相对于根元素<html>，这样就意味着，我们只需要在根元素确定一个参考值。 总之em相对于父元素，rem相对于根元素。 二、
rem、em、px的区别
m0_66783294的博客
05-13 2115
rem、em、px的区别 1.px像素（pixel）。绝对单位。像素px是相对于显示器屏幕分辨率而言的，是一个虚拟长度单位，是计算机系统的数字化图像长度单位 2.em是相对长度单位，相对于当前对象内文本的字体尺寸。如果当前行内文本的字体尺寸未被人为设置。则相对于浏览器的默认字体尺寸，它会继承父级元素的字体大小，因此并不是一个固定的值 3.rem是css3新增的一个相对单位（root em，根em'），使用rem为元素设定字体大小时，仍然是相对大小，但相对的只是HTML根元素 4.区别： IE无法调
px与rem和rpx的换算以及应用场景
ceike的博客
05-13 3699
px(pixel)和rem(root em)都是用于测量长度的单位,但是它们有不同的换算关系。px是绝对单位,1px = 1/96寸。在不同设备上,1px对应不同的物理尺寸,所以不适合用于响应式布局。rem是相对单位,它是相对于根元素<html>的字体大小来计算的。所以,如果html的font-size是16px,则1rem = 16px。如果html的font-size是20px,则1rem = 20px。
CSS单位px、em、rem及它们之间的换算关系
WangMin@汪末末
09-20 4171
作者:WangMin 格言:努力做好自己喜欢的每一件事 CSDN原创文章 博客地址 ???? WangMin 国内的设计师大都喜欢用px，而国外的网站大都喜欢用em和rem，那么三者的区别与优势是什么？接下来我们就来学习一下吧！ 单位px、em、rem分别表示什么？ 1、 px(Pixel) 相对于显示器分辨率而言，表示“绝对尺寸”（并非真正的绝对），实际上就是css中定义的像素（这里的像素与设备的物理像素有一定的区别），利用px设置字体大小及元素宽高等比较稳定和精确。px的特点如下： IE无法调整
html中px、em、pt的区别
LYQ
10-20 2169
单位名称为像素，相对长度单位，像素是相对于显示器屏幕分辨率而言的国内推荐；单位名称为相对长度单位。相对于当前对象内文本的字体尺寸，国外使用比较多；单位名称为点，绝对长度单位一般老版本的table使用长度大小单位但是现在基本上没有使用。像素；相对长度单位。点（）；绝对长度单位相对长度单位，这里与标签的"EM"拼写完全相同，而这里作为单独文本单位。1.以前IE无法调整那些使用px作为单位的字体大小,但现在几乎IE都支持 在这里也推荐使用作为单位;2.国外的大部分网站能够调整的原因在于其使用了作为字体单位。
CSS中px em rem区别与使用
12-09
在CSS布局和样式设计中，字体大小的设置是非常关键的一部分，通常我们会使用px、em或rem作为单位。这些单位各有特点，适用于不同的场景。下面将详细介绍它们的区别以及使用策略。 首先，px（像素）是最常见的长度...
CSS 中px、em、rem、%、vw、vh单位之间的区别详解
11-21
本文将详细解析px、em、rem、%、vw和vh这些单位的区别及其应用场景。 1. **px (像素)**: 像素是绝对长度单位，它基于屏幕的物理分辨率。1px表示设备上的一点，通常用于创建精确的图形或保持元素大小恒定。由于px是...
Vue项目自动转换 px 为 rem的实现方法
01-19
postcss-pxtorem：转换px为rem的插件。 自动设置根节点html的font-size 因为rem单位是相对于根节点的字体大小的，所以通过设置根节点的字体大小可以动态的改变rem的大小。 原理网上有很多文章分享，这里不具体解释。...
css中px、em和rem的区别总结
09-24
相信每位前端工程师们都有这么一个体会，国内的设计师大都喜欢用px，而国外的网站大都喜欢用em和rem，那么三者有什么区别，又各自有什么优劣呢？下面这篇文章小编就来给大家详细介绍关于css中px、em和rem的区别，...
em和px是什么？有什么区别
最新发布
zybijiso666的博客
03-16 582
像素（px）：像素是相对于显示设备的最小可见元素的单位。它是一个固定的单位，表示屏幕上的一个物理像素点。在网页设计中，通常使用像素来指定元素的大小、边距和间距等。另外，还有一种相对长度单位 rem，它与 em 类似，但是相对于根元素的字体大小。em：em 是相对长度单位，相对于父元素的字体大小。如果一个元素的字体大小为 16 像素，那么。使用 em 单位可以实现相对于父元素字体大小的灵活调整。"em" 和 "px" 是两种用于定义长度或大小的单位。表示字体大小为父元素字体大小的 1.5 倍。
px和rem的区别是什么
qq_45814648的博客
01-12 461
rem，相对单位，相对于html根节点的font-size的值，直接给html节点的font-size:62.5%;px是像素，显示器上给我们呈现画面的像素，每个像素的大小是一样，绝对单位长度。
em、rem、px区别
07-11 158
css中如何区分em、rem、px？ 随着css学习的不断深入页面也随之丰富，那么em、rem、px是我们在页面布局中经常会用到的单位，也是面试题中老生常谈的一个问题，经久不衰，那我们今天用我们的小案例来解释他们的区别吧！ px（像素） px这个单位用的非常多，我们大多数人都很熟悉了吧。px单位的名称为像素，它是一个固定大小的单元，像素的计算是针对（电脑/手机）屏幕的，一个像素（1px）就是（电脑...
px、em、rem的区别
weixin_75137504的博客
11-13 235
px、em、rem的区别
rem与px之间的转换
热门推荐
weixin_41970780的博客
11-17 1万+
rem与px之间的转换 最近一直在写app，那今天就说一下rem与px之间的转换。 rem是相对于根元素，这样就意味着，我们只需要在根元素确定一个参考值，这个参考值设置为多少，完全可以根据您自己的需求来定。 所以这里总结一句，所谓依赖根元素来计算的方式，就是先给予html元素一个font-size，然后我们所有的rem就根据这个font-size来计算 例如： html{ font-size:16px;} 那么我们这里的1rem就应该这么来计算：1x16=16px=1rem；浏览器默认为16px可能造成r
px em rem使用详解 区别对比，使用px,em还是rem
艾小逗
03-14 1692
介绍px em rem 区别 对比 PX px像素（Pixel）:相对长度单位,像素px是相对于显示器屏幕分辨率而言的。 IE无法调整那些使用px作为单位的字体大小； 国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位； Firefox能够调整px和em，rem，但是96%以上的中国网民使用IE浏览器(或内核)。 EM em是相对长度单位。相对于当前对象内文本的字体尺寸。相对...
区别css单位px、em、rem
七侠剑客的博客
06-12 6211
在对页面进行自适应时，查阅相关资料了解到，通常有两种方式将px转换为em或者rem，下面就上述三者之间的联系进行讲解： em与px转换 一般浏览器默认1em=16px，通过设置font-size大小来代表如：16px*0.625=10px，其则代表1em=10px，直接上代码(注释的样式为浏览器默认 （1em=16px）的长宽)： <!DOCTYPE html> <html la...
css中单位px和em,rem的区别
青天诀的专栏
05-26 1183
国内的设计师大都喜欢用px，而国外的网站大都喜欢用em和rem，那么三者有什么区别，又各自有什么优劣呢？PX特点 1. IE无法调整那些使用px作为单位的字体大小； 国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位； Firefox能够调整px和em，rem，但是96%以上的中国网民使用IE浏览器(或内核)。 **px像素（Pixel）。相对长度单位。像素px是相对于显示器屏幕分
EM与PX的对应关系
好大一只鸡的专栏
02-13 3360
公式转换——PXtoEM 如果你是第一创建弹性布局的，最好在身边准备一个计算器，因为我们一开始少不了很多的计算，有了他放心。 像素对于我们来说太密切了，因此我们也将从这开始。首先需要计算出1px和em之间的比例，然后是知道我们需要的px值。通过前面的介绍，大家都知道1em总是等于父元素的字体大小，因此我们完全可以通过下面的工式来计算： 1 ÷ 父元素的font-size × 需要
rem、em、px之间的转换
07-13
在CSS中，rem、em和px是用于度量长度的单位。 - px（像素）是最常见的单位，表示屏幕上的一个像素点。 - rem（根元素em）是相对于根元素的字体大小的单位。根元素是html元素，默认字体大小为16px。因此，1rem等于根元素的字体大小。 - em（相对于父元素em）是相对于父元素的字体大小的单位。如果没有明确指定父元素的字体大小，则默认为继承自父元素的字体大小。 要进行单位之间的转换，可以使用以下公式： - px到rem：将px值除以根元素的字体大小。例如，如果根元素的字体大小为16px，那么10px等于0.625rem（10/16）。 - px到em：将px值除以父元素的字体大小。例如，如果父元素的字体大小为14px，那么10px等于0.714em（10/14）。 - rem到px：将rem值乘以根元素的字体大小。例如，如果根元素的字体大小为16px，那么1rem等于16px。 - em到px：将em值乘以父元素的字体大小。例如，如果父元素的字体大小为14px，那么1em等于14px。 需要注意的是，由于em和rem是相对单位，其值会受到继承字体大小的影响。因此，转换时要确保参考的字体大小是正确的。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值