rem和em和px

默认字体16px;
px像素(Pixel)。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。
em是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置,则相对于浏览器的默认字体尺寸。
EM特点

  1. em的值并不是固定的;
  2. em会继承父级元素的字体大小。

rem是CSS3新增的一个相对单位(root em,根em),使用rem为元素设定字体大小时,仍然是相对大小,但相对的只是HTML根元素。当html的font-size改变时,使用rem的width和height就会在原基础上变大或变小,而且在原对象内如果设置字体大小不会像em里一样会改变该对象的盒子宽高

px 与 rem 的选择?
对于只需要适配少部分手机设备,且分辨率对页面影响不大的,使用px即可 。

对于需要适配各种移动设备,使用rem,例如只需要适配iPhone和iPad等分辨率差别比较挺大的设备。
在这里插入图片描述
在这里插入图片描述

### 移动端开发中的长度单位及其区别 #### 一、基本概念 在移动端开发中,不同的长度单位具有各自的特点适用场景。以下是 `rem`、`em`、`px`、`vh`、`vw` `%` 的定义: - **Rem**: 基准点为根元素 `<html>` 的字体大小,始终相对于文档的根元素计算尺寸[^3]。 - **Em**: 相对于其节点的字体大小来计算尺寸。如果未指定,则基于浏览器默认字体大小 (通常是 16px)[^4]。 - **Px**: 是一种绝对长度单位,在屏幕上的表现固定不变,不随其他因素变化而改变[^1]。 - **Vh/Vw**: 分别表示视口高度宽度的百分之一。例如,`1vh` 表示视口高度的 1%,`1vw` 则代表视口宽度的 1%。 - **Percent (%)**: 百分比是一种相对单位,通常用于相对于容器的宽高或其他属性的比例设定。 --- #### 二、具体差异分析 ##### 1. Rem vs Em 两者均为相对单位,但它们的主要区别在于参照物的不同: - `em`: 参照的是最近元素字体大小,容易受到嵌套层次的影响,可能导致复杂布局下的不可预测性[^2]。 - `rem`: 总是依据 HTML 文档根元素 (`<html>`) 的字体大小,因此更加稳定且易于维护。 ##### 2. Px 对比 Relative Units 像素是一个固定的物理单位,无论设备如何它都不会发生变化;然而,响应式设计提倡使用灵活可变的单位以适应多种分辨率需求。相比而言,`rem`, `em`, `vh/vw` 能够更好地满足跨屏适配的要求。 ##### 3. Vh & Vw 特殊用途 这些单位特别适合创建全屏覆盖效果或者动态调整组件大小的应用场合。比如实现图片轮播器的高度自适应等功能时非常有用。 ##### 4. Percent (%) 主要用于子元素相对于元素某些维度比例关系的确立上。当涉及到复杂的网格系统构建或是流体布局规划的时候尤为常见。 --- #### 三、最佳实践建议 为了提高用户体验并简化样式管理流程,在实际项目操作过程中可以遵循如下原则: - 尽量采用 `rem` 来代替传统的 `px` 定义文字及其他UI控件的基础尺度,因为前者能更方便地通过修改全局变量统一控制整个网站风格的一致性缩放行为。 - 如果需要局部微调某部分区域内的子项间距或边距等细节参数,可以选择利用 `em` 单位完成相应处理工作,因为它会自动跟随上设定做出同步变动从而减少额外配置负担。 - 当遇到涉及屏幕整体范围的操作任务如背景图填充、弹窗定位等情况之下优先考虑运用 `vh`/`vw` 类型指令达成目标效果。 - 关于百分比率方面的应用则多见于弹性盒子模型(Flexbox)以及栅格化框架结构之中用来分配空间份额等问题解决之上。 --- ```css /* 示例代码 */ :root { --base-font-size: 16px; } body { font-size: var(--base-font-size); /* 设置基础字号 */ } .container { width: 80%; /* 使用百分比设置宽度 */ padding: 2rem; /* 使用 rem 设定内边距 */ } .item { margin-bottom: 1em; /* 使用 em 添加底部外边距 */ height: 50vh; /* 让元素占据一半视口高度 */ } ``` --- ###
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值