rem与em单位对比

最新推荐文章于 2024-05-29 10:53:24 发布
最新推荐文章于 2024-05-29 10:53:24 发布
阅读量133 收藏
点赞数
分类专栏： 移动web 文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/nervelin/article/details/106415209
版权

em：相对单位，参考对象是直接父元素的font-size
例如：父元素font-size:10px; 子元素width:3.5em，那么子元素的width为10乘以3.5=35px
rem：相对单位，参考对象是根元素（html）的font-size
例如：html font-size:100px ，元素 height:1.2rem，那么元素的height为100乘以1.2=120px
em/rem都只是一个单位值，用到任意需要设置尺寸的地方都可以
em/rem都有自己的参考对象

蜡笔小新007
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
了解和使用CSS中的rem单位
01-08
什么是雷姆单位？ 在收听广播或音乐播放器之前，您可能遇到过“ REM”一词。与他们的音乐同伴不同，它们在深度睡眠期间被称为“快速眼动”，而CSS rem则代表“ root em”。他们不会使您失去宗教信仰，也不会相信月球上的男人。他们可以做的是帮助您实现和谐均衡的设计。 根据W3C规范，一个rem单位的定义是： 等于font-size根元素上的计算值。在font-size根元素的属性上指定时，rem单位是指属性的初始值。 这意味着1rem等于该html元素的字体大小（对于大多数浏览器而言，其默认值为16px）。 新建一个前端学习qun438905713，在群里大多数都是零基础学习者，大家相互帮
CSS中px em rem区别与使用
12-09
最近在学习字体时遇到字体大小的设置，font-size单位可以是px或em或rem，那么这几种单位都有什么区别呢，该如何使用呢？ px是像素图像的基本采样单位，相对于显示器屏幕分辨率而已的，什么是一个像素呢，你把一张图一直放大，会看到一个个小的方格子，一个方格子就是一个像素。浏览器默认的字体大小是16px。 px的特点是：字体大小写死固定了，是固定值，老版本IE无法缩放字体，但现在基本上都不用管低版本的IE。所以一般情况都会使用这种单位，够精确。 em是一个相对单位表示相对于其父亲元素字体的大小而言，可以是小数，整数。比如父元素字体大小是16px,则1em就是16px,2em就是32px。 e
浅析rem和em和px vh vw和% 移动端长度单位
12-13
1.rem和em、px 首先来说说em和px的关系 em是指字体高度 浏览器默认1em=16px,所以0.75em=12px;我们经常会在页面上看到根元素写的font-size:65%; 这样em就成了16px*62.5=10em;这是显示在页面的字体大小是10px; 这样12px=1.2em,10px=1em,也就是说只需要将你的原来的px数值除以10，然后换上em作为单位就行了, em的特点 em是个相对值 他会根据父级元素的大小而变化 但是如果嵌套了多个元素 要计算它的大小,是件很头疼的事情 这样的情况下,就出现了rem rem的区别在于它是相对于根基元素的,因此不会被它的父类影响到 结
em和rem的不同含义以及使用
大青虫的博客
05-28 689
1.em em是一个相对长度单位，参照父元素的宽度，比如，一个父元素的font-size：10px ，那么1em = 10px， 2.rem 同样是一个相对长度单位，但参照的是是根元素 ， 能更好的完成屏幕的适配 ，使用更多。 列如， 充分理解 rem ，依赖根元素 ，根据比例 去调整界面 1）一个屏幕的大小为640 ，分成20份（看需求），将body设置 font-size设置为32px；，那么一份就是32px（1rem） ， 2）使用媒体查询设置不同界面（比如屏幕宽度为...
rem布局和Less的语法
weixin_65635437的博客
06-07 123
rem布局和Less的语法
em和rem单位
JJ_Smilewang的博客
04-18 1141
我们在制作web端页面时，基本都是使用像素px作为单位，但是我们知道移动端设备具有多种多样的宽度，而使用物理单位在不同宽度和不同分辨率的手机上会有一定差异，那么在某些设备可能就会出现页面不美观的问题。所以为了解决此问题，移动端推荐使用rem作为单位。 我们知道还有个常见单位是em，那么它们之间有什么区别呢？ 1.em单位 em是一个相对单位，是相对父元素字体大小的。 <style> div { font-size: 18px; /* 设置父元素的字体大小 *
em和rem 单位的使用
WaterSprite_ct的博客
10-12 460
浅谈 px、em和rem的区别
[CSS] 单位 em 和 rem 的区别
weixin_36210698的博客
05-13 368
单位 em 和 rem 的区别 原文链接： css中单位em和rem的区别 在 css 中单位长度用的最多的是 px、em、rem，这三个的区别是： px 是固定的像素，一旦设置了就无法因为适应页面大小而改变。 em 和 rem 相对于 px 更具有灵活性，他们是相对长度单位，意思是长度不是定死了的，更适用于响应式布局。 对于 em 和 rem 的区别一句话概括：em 相对于父元素，rem 相对于...
rem、em的区别与使用方式
brian的博客
08-23 4855
本质区别: rem(root element)是参照html的font-size,em(element)是参照父元素的font-size 优点: 以rem/em为单位比px更方便,屏幕尺寸发生变化时只需要更改html/body基数即可,不需要再重新给每个标签写不同的font-size 1.使用rem为单位,系统处理时(将rem转化为px)只会看html的font-size    在使用med...
rem单位使用法
李特成的博客
07-10 563
CSS3的出现，他同时引进了一些新的单位，包括我们今天所说的rem。在W3C官网上是这样描述rem的——“font size of the root element” 。下面我们就一起来详细的了解rem。前面说了“em”是相对于其父元素来设置字体大小的，这样就会存在一个问题，进行任何元素设置，都有可能需要知道他父元素的大小，在我们多次使用时，就会带来无法预知的错误风险。而rem是相对于根元素&lt...
CSS 中px、em、rem、%、vw、vh单位之间的区别详解
11-21
px就是pixel（像素）的缩写，相对长度单位，相对于屏幕分辨率。 2、em 参考物是父元素的font-size，具有继承的特点。浏览器默认字体是16px，整个页面内1em不是一个固定的值。 字体大小同样都是1.5em，但是效果却截然...
rem单位的使用，做响应式网站
aliven1的博客
12-29 3247
var fun = function (doc, win) { var docEl = doc.documentElement, resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize', recalc = function () { var clientWidth = d
细说 rem 与 em
p1967914901的博客
02-01 5330
本文我们将介绍CSS中的rem 和 `em，理解这两个单位之间的区别对于想要创建灵活、响应迅速、易于维护和修改的网页的 web 开发人员来说是至关重要的。
目前最火的前端布局方式：less+rem+媒体查询
bigpatten的博客
02-10 3420
1. rem基础 rem单位 rem (root em)是一个相对单位，类似于em，em是父元素字体大小，rem的基准是相对于html元素的字体大小。 比如，根元素（html）设置font-size=12px; 非根元素设置width:2rem; 则换成px表示就是24px。 /* 根html 为 12px */ html { font-size: 12px; } /* 此时 div 的字体...
CSS 媒体查询 响应式开发
生产队的驴
05-27 277
媒体查询（Media Queries）是CSS3的技术，可以根据设备的特性（如屏幕宽度、高度、方向等）来应用不同的样式规则。媒体查询可以使网页在不同设备上呈现不同的样式，以实现响应式设计。
css-垂直居中的几种写法
xxuxioxx的博客
05-27 317
垂直居中的几种写法
css让padding、border不占据宽度
最新发布
于忠会的博客
05-29 417
有时我们不希望 padding 影响到 div 的实际宽度。以前只能手动计算 width，从 CSS3 开始可以通过 box-sizing 来做到这一点。则包含 padding，div 的实际宽度为 120px。CSS3 新增了 box-sizing 属性。则 div 的实际宽度为 120px。以前，如果指定 div 的宽度为。
了解CSS中的link和@import引入CSS的区别
祈澈菇凉
05-28 109
【代码】了解CSS中的link和@import引入CSS的区别。
css 渐变色边框
随风潜入夜，不白头
05-28 273
具体用法，拷贝到你的html中，在浏览器上慢慢调试即可！
css单位中px和em、rem
07-12
与em不同，rem可以避免多层嵌套时字体大小的累积效应。 总结一下，像素（px）是绝对单位，而em和rem是相对单位。使用相对单位可以帮助我们实现响应式设计，使元素在不同设备和屏幕尺寸下保持比例和一致性。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值