em和rem

最新推荐文章于 2025-02-17 20:04:18 发布
最新推荐文章于 2025-02-17 20:04:18 发布
阅读量2.5k 收藏
点赞数 2
分类专栏： css 文章标签： em rem
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_42707446/article/details/93200711
版权

em：基于父级元素的字体大小；

rem：基于html的字体大小

由于浏览器的字体大小一般默认是16px；1rem=16px;

在设置rem时；

html{font-size:62.5%;/*10 ÷ 16 × 100% = 62.5%*/}

 

CSS的REM单位详解
PixelInk的博客
10-01 696
REM单位是CSS中的相对单位，它相对于根元素的字体大小进行度量。通过设置根元素的字体大小，可以使用REM单位来定义其他元素的尺寸。在上述代码中，body元素的字体大小被设置为1rem，它将等于根元素的字体大小（即16像素）。同样，h1元素的字体大小为2rem，它将等于根元素字体大小的两倍（即32像素）。REM单位的大小取决于根元素的字体大小。相比其他单位（如像素、百分比等），REM单位的值是相对于根元素字体大小的倍数。通过使用REM单位，可以根据根元素的字体大小自动调整其他元素的尺寸，以实现响应式设计。
px、em 和 rem 的区别：深入理解 CSS 中的单位
chaosweet的博客
01-14 1318
授人以鱼，不如授人以渔。
细说 rem 与 em
p1967914901的博客
02-01 5652
本文我们将介绍CSS中的rem 和 `em，理解这两个单位之间的区别对于想要创建灵活、响应迅速、易于维护和修改的网页的 web 开发人员来说是至关重要的。
大白话rem、em、vw区别
前端大白话
02-17 1456
在前端开发里，rem、em、vw都是用来设置元素大小的单位，下面就用大白话讲讲它们的区别。
em和rem的区别
weixin_51044287的博客
08-30 737
em和rem区别的简单理解
em、rem的区别
fury的博客
09-04 921
可以避免继承链中的字体大小变化导致的问题，使得设计更加稳定和可预测。使用rem开发过程中我们会引入一个flexible文件，怎么引入？通常更受欢迎，因为它提供了更一致的布局和排版控制。实际开发中使用em多还是rem多？都用于设置相对长度，但有区别。相对的是当前元素的字体大小，而。会受到父元素字体大小的影响，而。是相对根元素（通常是。
css中px、em和rem的区别总结
01-21
em 和 rem 都是灵活可扩展的单位，由浏览器转换为像素值，取决于设计中的字体大小，如果使用值 1em 或 1rem ，它可以被浏览器转换为从 16px 到 160px 或其他任意值。浏览器使用 1px ，那么 1px 始终显示为完全 1px。...
CSS3 px 和 em 和 rem
08-14
本文将深入探讨CSS3中的单位px、em和rem，它们都是用来定义元素尺寸的重要工具，但各有其特点和应用场景。 首先，我们要理解像素（px）单位。像素是屏幕上的最小显示单位，通常用于创建精确的布局。当你设置一个...
今天看看来研究下微信小程序没人关注的的东西：em 和 rem
03-29
基本上，在微信小程序里面很多人用的都是rpx作为单位，但是小程序里面也可以用em 和 rem 作为单位，只不过他们相对于rpx来说看起来是有点麻烦了些。自己就来摸索下若果使用相对单位的时候，是个什么样的机制。 首先 ...
CSS单位em和rem
weixin_33957648的博客
01-29 199
写过样式的都知道CSS是有单位的，想要写出还原设计稿的完美样式，离不开好的单位。现在CSS的单位有%、in、cm、mm、em、ex、pt、pc、px等原生单位，现在更有了rem、vh、vw、vmin、vmax等单位。 一般开发用px比较多，现在开发移动端rem用的也比较多，在这边就不讨论vh和vw与rem的比较。今天只说说em和rem具体的显示单位。 应该很多都知道rem是根据HTML元素设置的字...
rem和em的区别
weixin_39808181的博客
02-26 3942
em和rem的主要区别是：浏览器根据谁来转化成px。 当使用rem的时候，他们转化为像素的大小取决于页根元素的字体大小，即html元素的字体大小。 例如：根元素的字体大小为16px，10rem将等于160px，即10*16=160。 当使用em的时候，em转为像素的大小取决于他们使用的字体大小。 此字体大小受从父元素继承过来的字体大小，除非显式重写与一个具体单位。 例如，父级元素字体大小为13px,10em将等同于130px,即13x10 = 130px ...
rem与em
qq_45903688的博客
02-15 458
1.rem：相对与根元素font-size的大小，若未设置，则相对于默认font-size 一般是16px 2.em：相对与父级元素font-size的大小，如果外层父级未设置font-size，再从外层查找，如果所有父级都为设置，就是相对于默认font-size的大小。 Rem例子： html{ font-size: 20px; } .box{ font-size: 2rem; heigh
浅谈em和rem区别
走在秃头的路上的博客
01-14 921
自己在学习过程中，对于rem和em一直没有怎么用过，直到做移动端适配，需要用到rem。这两个单位简单点来说，就是，em是相对于父级元素大小的，比如这段代码： <style> .father{ font-size: 15px; } .son{ font-size: 2em; ...
em和rem的区别，rem适配的原理
WZH15075051915的博客
03-15 3551
rem是CSS3中新增的一个单位，目前移动开发使用也是最广泛的，同样，它也是一个相对单位，不过相对的是HTML根元素，和em不同的是，rem不用时时去关注父级的情况。根据不同屏幕的宽度，以相同的比例动态修改html的font-size适配，并将px替换成rem，它可以很好的根据根元素的字体大小来进行变化，从而达到各种屏幕基本一直的效果体验。rem与em都是相对单位，我们使用它们的目的就是为了适应各种不同的移动端和pc端的屏幕。rem是根据html根节点来计算的，而em是根据父级元素的字体计算的。
em,rem
weixin_49563231的博客
06-29 151
* 单位 em rem + rem:跟随根元素（html）的字体大小去变化 一般情况下设置html{font-size:100px;} + vh(viewheight) 7w (viewwidth) 1vw = 视口宽度的1% 10vw= 视口宽度的10% **100vw = 视口宽度的100%** **100vh = 视口高度的100%** + 推理过程 1rem = 100px; 100vw .
px、em 和 rem的区别
最新发布
03-30
### CSS中 `px`, `em`, 和 `rem` 的区别及用法 #### 1. 定义与特性 - **`px`**: 表示屏幕上的物理像素，是一种绝对单位。它的值不会随浏览器缩放或视口变化而改变[^2]。每个 `px` 对应显示设备的一个单一像素。 - **`em`**: 是一种相对长度单位，基于当前元素的父级字体大小计算。默认情况下，大多数浏览器设置的初始字体大小为 16px，因此未调整前 1em = 16px。通过修改 body 字体大小（如设为 62.5%），可以使 1em 转化为更易于管理的比例关系，即 1em ≈ 10px[^1]。 - **`rem`**: 同样是相对长度单位，但它始终相对于根元素 `<html>` 的字体大小定义。无论嵌套层次如何，`rem` 不会受任何父级元素的影响，这使得它非常适合全局一致性的布局需求[^3]。 #### 2. 计算方式 - 如果 HTML 设置如下： ```css html { font-size: 16px; } div { font-size: 18px; } span { font-size: 1.5em; /* 相对于最近的父元素 */ } ``` 则 `<span>` 的实际字体大小将是 `1.5 * 18px = 27px`，因为 `em` 基于直接父级 `div` 的字体大小计算。 - 若改为使用 `rem`： ```css span { font-size: 1.5rem; /* 相对于根元素 <html> */ } ``` 此时 `<span>` 的字体大小则为 `1.5 * 16px = 24px`，独立于中间层 `div` 的设定。 #### 3. 使用场景 - **`px`**: - 当需要精确控制页面元素尺寸时适用。 - 如按钮宽度、图片高度等固定不变的设计细节。 - **`em`**: - 更适合局部范围内的比例调节，比如段落文字相对于标题字号缩小的情况。 - 或者构建动态适应不同分辨率的小型模块结构。 - **`rem`**: - 推荐用于整体网站框架搭建以及大型组件样式制定。 - 提供更好的可维护性和一致性，在响应式网页设计中有显著优势[^4]。 ```css /* 示例代码展示三种单位的实际应用 */ /* 全局基础配置 */ html { font-size: 16px; /* 默认基准 */ } body { font-size: 62.5%; /* 修改后便于 em/px 换算 */ } /* 局部控件采用 px 实现精准定位 */ .button { width: 120px; height: 40px; } /* 文本内容利用 em 达成灵活适配 */ p { font-size: 1.2em; /* 等价于原生约 19.2px */ } h1 { font-size: 2em; /* 大小依据上下文环境自动调整 */ } /* 主题风格切换依靠 rem 维护统一标准 */ .container { padding: 2rem; /* 固定间距不依赖特定区域属性 */ } ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值