相对单位em、rem

最新推荐文章于 2025-01-14 16:29:06 发布
最新推荐文章于 2025-01-14 16:29:06 发布
阅读量161 收藏
点赞数
CC 4.0 BY-SA版权
原文链接：http://www.cnblogs.com/yangyutian/p/11015939.html

案例如下

　　

　　

　　

　　

　　

 

转载于:https://www.cnblogs.com/yangyutian/p/11015939.html

px、em、rem单位间的区别
simple_Xsg的博客
04-11 1461
1. px px是pixel的缩写，中文翻译是像素的意思；我们一般用来设置元素的宽高、字体大小，查了一下它不是自然界的长度单位。px是就是一张图片中最小的点，一张图就是由这些点构成的。1024px就是1024像素，如果是1024px×768px，也就是说水平方向上有1024个点，垂直方向上有768个点。谁能说出一个“点”有多长多大么？可以画的很小，也可以很大。如果点很小，那画面就清晰，我们称它为“分辨率高”，反之，就是“分辨率低”。所以，像素的大小是会“变”的，也称为“相对长度”； 特点：不会随着浏览.
em rem 相对单位
A123ppleQueen的博客
06-27 393
绝对单位 px,就是说5px放在哪里都一样大。 1em=16px 但是em rem是相对单位，相对单位的值会根据外部因素发生变化。比如2em会根据它作用到的元素而变化。 因为网页响应式得特点，我们只能去学习css带来的抽象行 响应式 在css中指的是样式能根据浏览器窗口的大小有不同的响应 相对单位就是css用来解决这种抽象的工具。我们可以基于窗口大小来等比例的缩放字号，或者将网页山海关的任何元素都相对于基础字号来设置，然后只用更改一行代码就能缩放整个网页。 css长度单位 css支持几种绝对
CSS—相对单位rem
雷雨天的雷胖子
11-26 1617
目录 一、概述 二、详解 一、概述 rem是一个相对长度单位，它的单位长度取决于根标签html的字体尺寸。rem即root em的意思，中文翻译为根em。浏览器的文本尺寸一般默认为16px，即默认情况下： 1rem = 16px rem布局原理：根据CSS媒体查询功能，更改根标签的字体尺寸，实现rem单位随屏幕尺寸的变化，如下代码所示。 @media only screen an...
CSS—相对单位em
雷雨天的雷胖子
12-29 900
目录 一、概述 二、详解 三、注意事项 一、概述 em是一个相对长度单位，它的单位长度取决于当前元素行内文本的字体尺寸，如当前元素行内文本的字体尺寸未设置，则相对于浏览器的默认字体尺寸。em最初是指字母M的宽度，故名em，现指字符宽度的倍数，用法类似百分比，如：0.8em、1.2em、2em等。 em可以设置width、height、line-height、margin、padding...
em是什么单位
飞龙在天
05-27 3433
转自：em是相对长度单位。相对于当前对象内文本的字体尺寸。  一般用法是，我们定义或浏览器的默认全页面的字体大小，当然我赞同自己定义会比较好，因为这样就不会因为浏览器的原因而使页面的字体大小变化导致页面错位。  所以我们可以一开始这样定义  body{font-size:12px;}//当然字体大小就自定了。  这是font-size的这个值便作为1em，font-size的定义值
em解读，em是一个相对单位，那么其又是相对于谁呢？
imkaifan的博客
01-23 1275
em解读，em是一个相对单位，那么其又是相对于谁呢？
px、em 和 rem 的区别：深入理解 CSS 中的单位
Ttbraver
01-14 1490
授人以鱼，不如授人以渔。
CSS 中px、em、rem、%、vw、vh单位之间的区别详解
11-21
本文将详细解析px、em、rem、%、vw和vh这些单位的区别及其应用场景。 1. **px (像素)**: 像素是绝对长度单位，它基于屏幕的物理分辨率。1px表示设备上的一点，通常用于创建精确的图形或保持元素大小恒定。由于px是...
CSS中px em rem区别与使用
12-09
接下来是em，这是一个相对单位，它的大小基于父元素的字体大小。例如，如果父元素的`font-size`是16px，那么1em就等于16px，2em则是32px。em单位的一个主要优点是它可以实现灵活的响应式设计，因为元素的大小会根据...
相对单位em和rem的区别，屏幕适配
weixin_33877885的博客
03-17 143
为什么80%的码农都做不了架构师？>>> ...
使用相对长度单位rem布局网页内容
穆雄雄的博客
11-03 340
前言：上篇我们提到了相对单位em的用法，知道了em的概念，即是一个相对的单位，也知道了em的值不是固定的，p标签里的em和p里面的div下面的1em的px值并不是一样的。具体是多少呢？那...
前端学习のhtml元素布局
anqijava的博客
10-21 266
Adjusting the Padding of an Element 现在让我们把 Cat Photo App 暂时搁置，以学习更多的 HTML 样式。 你可能早已经注意到了这点，所有的 HTML 元素本质上是小的矩形块，代表着某一小块区域。 有三个影响HTML元素布局的重要属性：padding(内边距)、margin(外边距)、border(边框)。 元素的
css3-rem相对长度单位特点
sixteen_cicle的博客
10-26 484
rem是CSS3新增的一个相对单位（root em，根em），这个单位引起了广泛关注。 这个单位与em有什么区别呢？区别在于使用rem为元素设定字体大小时，仍然是相对大小，但相对的只是HTML根元素。 这个单位可谓集相对大小和绝对大小的优点于一身，通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。 目前，除了IE8及更早版本外，所有浏览器均已支持r
相对单位rem
weixin_33743248的博客
06-13 156
-前言- 「rem」是指根元素（root element）的字体大小，那么它的优点也就是不会随着父元素的字体大小变化而变化了，减少了父子元素之间字体大小计算的复杂程度。 建议事先参阅CSS中px和em的区别一章节。 尺寸单位也不知rem、em、px这三种，因为上面这三种最为常用，或者说将来最为常用，下面进入正题。 -正文- 几乎大部分浏览器出奇的一致，根元素 html 的默认字...
相对单位em 和 rem --读《CSS in depth》
如斯学web
08-13 793
目录   1，绝对单位和相对单位 2，em的使用分三种情况：   1，把各个方向的padding的值设置为字号大小   2，对font-size 使用em   3，对font-size和padding等同时使用相对单位 3，rem   3.1，相对单位和响应式（一个例子） 1，绝对单位和相对单位 对于现在的互联网，页面有可能会在各种型号的屏幕上展示。既可能是一个5英寸的手机屏，...
rem移动端相对单位
qq_42036203的博客
03-04 1793
加入QQ群：864680898，一起学习进步！ rem移动端相对单位 移动端禁用用户缩放 <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no"> 什么是dpr？ devicePixelRatio其实指的是window.devic
em表示什么长度单位_长度单位em和rem的区别
weixin_39623716的博客
12-21 573
em 和 rem 都是相对单位，由浏览器转换为像素值，具体取决于您的设计中的字体大小设置。 如果你使用值 1em 或 1rem，它可以被浏览器解析成 从16px 到 160px 或其他任意值。何时使用 Em 与 Rempadding设置了1em何时使用 Em 与 Rem解析出来的值为16px何时使用 Em 与 Rempadding设置了1em何时使用 Em 与 Rem解析出来的值为160px另一方...
浅析 em 和 rem
逍湘子
12-05 622
em 和 rem 都是相对长度单位
CSS 中px、em、rem、%、vw、vh单位之间的区别详解【全网最全】
橙-极纪元-JJYCheng
06-22 9618
CSS 中px、em、rem、%、vw、vh单位之间的区别详解【全网最全】
em rem的区别
最新发布
03-09
<think>好的，用户想了解CSS中em和rem单位的区别。首先，我需要回顾这两个单位的基本定义和用法。em是相对于父元素的字体大小，而rem是相对于根元素（html）的字体大小。接下来，我需要举例说明它们的不同行为，比如嵌套元素时的效果差异。 然后，我应该考虑用户可能的实际应用场景，比如字体大小、间距、布局等，说明在哪些情况下使用em更合适，哪些情况下rem更有优势。比如，rem适合用于全局一致的尺寸，而em适合组件内部的相对调整。 还要提到浏览器兼容性，rem在旧版浏览器如IE8及以下可能不支持，但现代浏览器都支持。不过用户提供的引用[4]提到某个代码片段在Opera中不起作用，可能需要注意兼容性问题。 用户提供的引用中有提到em和rem在可维护性和可访问性方面的优势，特别是引用[1]指出rem解决了开发者和用户之间的可访问性问题，需要强调这一点。同时，引用[2]中的例子展示了em的继承问题，嵌套使用可能导致尺寸叠加，而rem可以避免这个问题。 可能需要比较两者的优缺点，比如em的级联效应可能导致复杂嵌套中的计算困难，而rem提供更稳定的基准。此外，引用[5]关于line-height的例子，虽然不直接相关，但可以补充说明单位在行高设置中的应用。 最后，生成相关问题需要考虑用户可能进一步想了解的内容，比如如何选择单位、最佳实践、转换工具或常见的错误案例。确保问题覆盖使用场景、技术细节和实际应用中的注意事项。</think>### CSS中em和rem的区别 在Web开发中，`em`和`rem`都是相对长度单位，但它们的基准不同，具体区别如下： #### 1. **`em`单位** - **定义**：`1em`等于当前元素的父元素的字体大小（若未显式定义父元素字体大小，则继承自更上层元素或浏览器默认值）。 - **特点**： - 层级继承性：嵌套元素中使用`em`时，尺寸会逐层叠加计算。例如，父元素字体为`16px`，子元素设置`font-size: 1.2em`，则子元素字体为`19.2px`；若孙元素再设置`1.2em`，则实际为`23.04px`。 - 适合组件内部布局：如按钮内边距与自身字体大小成比例时，用`em`可保持比例关系[^2]。 #### 2. **`rem`单位** - **定义**：`1rem`等于根元素（`html`）的字体大小（默认`16px`，可通过`html { font-size: ... }`修改）。 - **特点**： - 全局一致性：所有使用`rem`的元素均基于根元素计算，避免嵌套导致的尺寸混乱。 - 可访问性优势：用户调整浏览器默认字体大小时，`rem`单位会自动适应，提升可访问性[^1]。 #### 3. **对比示例** ```css .parent { font-size: 20px; } .child-em { font-size: 1.5em; } /* 实际为30px (20px * 1.5) */ .child-rem { font-size: 1.5rem; } /* 实际为24px（假设根字体为16px） */ ``` #### 4. **应用场景** - **使用`em`**：组件内部相对尺寸（如按钮内边距）、需要与父元素联动的场景。 - **使用`rem`**：全局布局（如间距、容器宽度）、需要响应字体大小调整的场景[^3]。 #### 5. **兼容性** - `rem`兼容IE9+及现代浏览器，若需支持IE8需用`em`或像素单位[^4]。 ---
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值