px, em, rem的区别

本文深入探讨了移动端网页设计中字体单位的选择,重点介绍了px、em和rem的特点与应用。解析了em与rem在不同场景下的优劣,以及如何通过调整根元素字体大小简化rem的使用。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

一般我们在pc上主要是流动式布局,采用的单位一般都是px,由于pc屏幕都是很大的,所以不用过多的担心字体单位的选择,但是在移动端由于手机屏幕较小,且各种屏幕尺寸你一不小心你布局的样式或者单位字体显得过大这都不是很理想的。那么我们就来说下移动端的字体选择。

移动端布局最常见的是单位解决是rem.还可以用媒体查询+em和px

px(绝对长度单位)

像素px是相对于显示器屏幕分辨率而言的。也是pc端常用的方式

em(相对长度单位)

例子如下:

1.png

2.png

图2的是1.6em的font-size大小, 1.6em是25.6px

3.png
图3是1em 或者 1rem的大小,
1em = 1rem = 16px

浏览器的默认字体都是16px,那么1em=16px,以此类推计算12px=0.75em,10px=0.625em,2em=32px;

这样使用很复杂,很难很好的与px进行对应,也导致书写、使用、视觉的复杂(0.75em、0.625em全是小数点);

为了简化font-size的换算,我们在body中写入一下代码

    body {font-size: 62.5%;  } /*  公式16px*62.5%=10px  */  

这样页面中1em=10px,1.2em=12px,1.4em=14px,1.6em=16px,使得视觉、使用、书写都得到了极大的帮助。

如:

    <div class="font1" style='font-size:1.6em'>我是1.6em</div>

image.png

但是缺点就是
1、em的值并不是固定的;

2、em会继承父级元素的字体大小(参考物是父元素的font-size;);

3、em中所有的字体都是相对于父元素的大小决定的;所以如果一个设置了font-size:1.2em的元素在另一个设置了font-size:2em的元素里, 那么计算的结果是1.2X2=2.4em

image.png

image.png

rem (相对单位)

rem和em的大小与px的转换相同,
但是 不同的是 rem总是相对于根元素(如:root{}),而不像em一样使用级联的方式来计算尺寸
image.png

image.png

所以rem 是相对于根元素html。不会像em那样,依赖于父元素的字体大小,而造成混乱。使用起来安全了很多
!!!!!!IE8(IE9及以上),Safari 4或 iOS 3.2中不支持rem单位,

### CSS中 `px`, `em`, 和 `rem` 的区别及用法 #### 1. 定义与特性 - **`px`**: 表示屏幕上的物理像素,是一种绝对单位。它的值不会随浏览器缩放或视口变化而改变[^2]。每个 `px` 对应显示设备的一个单一像素。 - **`em`**: 是一种相对长度单位,基于当前元素的父级字体小计算。默认情况下,数浏览器设置的初始字体小为 16px,因此未调整前 1em = 16px。通过修改 body 字体小(如设为 62.5%),可以使 1em 转化为更易于管理的比例关系,即 1em10px[^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、付费专栏及课程。

余额充值