em和px

em是何物?
em指字体高,任意浏览器的默认字体高都是16px。所以未经调整的浏览器都符合: 1em=16px。那么12px=0.75em, 10px=0.625em。为了简化font -size的换算,需要在css中的body选择器中声明Font-size=62.5%,这就使em值变为16px*62.5%=10px, 这样12px=1.2em, 10px=1em, 也就是说只需要将你的原来的px数值除以10,然后换上em作为单位就行了。em有如下特点:
1. em的值并不是固定的;
2. em会继承父级元素的字体大小。

重写步骤:
1. body选择器中声明Font-size=62.5%;
2. 将你的原来的px数值除以10,然后换上em作为单位;
简 单吧,如果只需要以上两步就能解决问题的话,可能就没人用px了。经过以上两步,你会发现你的网站字体大得出乎想象。因为em的值不固定,又会继承父级元 素的大小,你可能会在content这个div里把字体大小设为1.2em, 也就是12px。然后你又把选择器p的字体大小也设为1.2em,但如果p属于content的子级的话,p的字体大小就不是12px,而是1.2em= 1.2 * 12px=14.4px。这是因为content的字体大小被设为1.2em,这个em值继承其父级元素body的大小,也就是16px * 62.5% * 1.2=12px, 而p作为其子级,em则继承content的字体高,也就是12px。所以p的1.2em就不再是12px,而是14.4px。
3. 重新计算那些被放大的字体的em数值。避免字体大小的重复声明,也就是避免以上提到的1.2 * 1.2= 1.44的现象。比如说你在#content中声明了字体大小为1.2em,那么在声明p的字体大小时就只能是1em,而不是1.2em, 因为此em非彼em,它因继承#content的字体高而变为了1em=12px。

### 移动端开发中的长度单位及其区别 #### 一、基本概念 在移动端开发中,不同的长度单位具有各自的特点适用场景。以下是 `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、付费专栏及课程。

余额充值