px,em,rem区别

px,em,rem区别

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

em是相对长度单位。相对于当前对象内文本的字体尺寸。
如当前对行内文本的字体尺寸未被人为设置,则相对于浏览器的默认字体尺寸(默认1em=16px)。

  1. em的值并不是固定的;
  2. em会继承父级元素的字体大小。
  3. body选择器中声明Font-size=62.5%;
  4. 将你的原来的px数值除以10,然后换上em作为单位;
  5. 重新计算那些被放大的字体的em数值。避免字体大小的重复声明。
rem
rem是CSS3新增的一个相对单位(root em,根em),
使用rem为元素设定字体大小时,仍然是相对大小,但相对的只是HTML根元素。
优点:通过它既可以做到只修改根元素就成比例地调整所有字体大小,又可以避免字体大小逐层复合的连锁反应。

总的就是
px相对屏幕显示器分辨率
em相对当前对象,会继承父元素的字体大小
rem相对html根元素

简单记录学习笔记不全,如有错误请好心人指点~~

### 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、付费专栏及课程。

余额充值