em和rem 单位的使用

em和rem
px、em和rem三者的关系
1.px
概念:像素。相对长度的单位。
特点:所有浏览器均支持
2.em
概念:是长度的相对单位。
特点:em的值不是固定的、会继承父级元素的字体大小。相对父级的的字体大小。
3.rem
概念:CSS3新增的单位,长度的相对单位,以html元素的字体单位做参考。

em的用法
由于em会继承父级元素的字体,所以多级使用em会出现,情况会变得棘手,会使得像素的单位计算变得复杂。
实例Demo:
<div class="parents">
    祖先
    <div class="parent">
        爷爷
        <div class="father'>
             父亲
             <div class="son">儿子</div>
        </div>
    </div>
</div>
.parents{
    font-size: 20px;
}
.parent{
   font-size: 1.5em;/*相当于 font-size:30px*/
   width: 2em; /*相当于 width:40px;   2 * 20px*/
}
.father{
    width: 1em; /*相当于 width: 30px;  以父级字体单位做参考 1 * 30px;*/
}

rem 的用法
rem是css3新增的相对单位,但与 em 的区别在于相对的参考对象。em是相对其父级元素的字体大小,而rem是相对 html 的字体大小,因此rem相对灵活,参考对象都一致为 html元素的字体大小。
实例Demo:
<div class="parents">
    祖先
    <div class="parent">
        爷爷
        <div class="father'>
             父亲
             <div class="son">儿子</div>
        </div>
    </div>
</div>
html{
   font-size: 10px;
}
.parents{
    font-size: 20px;
}
.parent{
   font-size: 1.5rem;/*相当于 font-size:15px*/
   width: 2rem; /*相当于 width:20px;   2 * 10px*/
}
.father{
    width: 1rem; /*相当于 width: 10px;  以父级字体单位做参考 1 * 10px;*/
}
移动端的适配问题
在移动端,能使用百分比的尽可能使用百分比,也可通过设置html的字体来适配,可通过浏览器的宽度动态计算 html 的字体大小。
为了方便计算,一般采用设计稿的宽度像素w/10 px 作为html的字体大小。譬如,移动设计稿为 750 x *,可进行html的字体设置为75px。这样的话, 1rem = 75px。
也有些时候,前端开发者,会利用浏览器默认字体 16px。通过设置html元素的字体大小为 16px * 62.5% = 10px (即 font-size = 10px, 1rem = 10px);

需要注意的:
在浏览器中,html允许的最小字体大小 不同,Chrome浏览器允许 字体最小 font-size: 12px;也就是说,html的字体最小为12px,当html的font-size<12px;1rem = 12px;10rem = 120px;
为了避免这种情况,动态改变html的字体大小来实现移动端适配,我们尽可能将html的字体大小设置大一点,譬如 浏览器的可视区域宽度为 400px, 可进行设置html元素的font-size:40px (即 1rem = 40px) ;

什么情况使用em、rem、px和百分比
1. 占满全屏的元素宽度可设置 100%
2. PC和移动端字号相差很大的字体可利用rem设置字体大小

<think>我们被要求解释CSS中emrem单位的区别及使用场景。参考了用户提供的引用内容,我们可以总结如下:1.emrem都是相对长度单位。2.em是相对于当前元素或父元素的字体大小(font-size)来计算的。3.rem是相对于根元素(即html元素)的字体大小来计算的。具体来说:-em:如果当前元素设置了字体大小,则1em等于该字体大小;如果没有设置,则继承父元素的字体大小作为基准。注意,当用于其他属性(如width,height)时,也是相对于当前元素的字体大小。-rem:始终相对于根元素(html)的字体大小。无论嵌套多深,1rem都等于根元素的字体大小。使用场景:-em:适用于需要相对于当前上下文(例如组件内部)进行缩放的场景。比如,在按钮中,我们希望内边距(padding)边框圆角(border-radius)相对于按钮的字体大小按比例缩放。-rem:适用于需要全局统一基准的场景,特别是在响应式设计中。通过改变根元素的字体大小,可以整体调整页面所有使用rem单位的元素尺寸,便于实现响应式布局。引用中给出了示例:引用[3]中的例子说明了rem使用:根元素(html)设置font-size:14px,那么子元素设置font-size:2rem,实际就是28px(2×14px)。而em在引用[3]的例子中虽然没有直接给出,但通常如果.parent设置font-size:18px,那么.child如果设置font-size:2em,则会是36px(2×18px)。引用[4]也指出:rem由于简化了尺寸管理,在现代Web开发中越来越受欢迎。下面我们用代码示例来进一步说明:**em示例:**```html<style>.parent{font-size:20px;}.child-em{/*1em=20px(继承自父元素)*/font-size:1.5em;/*30px*/padding:1em;/*30px?注意:这里padding的1em是相对于当前元素的字体大小,即30px*/}</style><divclass="parent"><divclass="child-em">这个div的字体大小是30px,内边距也是30px。</div></div>```注意:在child-em中,padding:1em的计算是基于当前元素的字体大小(30px),而不是父元素的20px。**rem示例:**```html<style>html{font-size:16px;}.box{font-size:1rem;/*16px*/padding:2rem;/*32px*/}/*即使嵌套,rem也相对于根元素*/.inner-box{font-size:0.5rem;/*8px*/padding:1rem;/*16px*/}</style><divclass="box">字体16px,内边距32px。<divclass="inner-box">字体8px,内边距16px。</div></div>```在这个例子中,无论元素嵌套多深,rem单位始终相对于根元素的16px。###使用场景总结:-**em使用场景**:-需要相对于当前元素字体大小设置其他属性(如padding、margin、width等)时,确保这些属性与字体大小成比例。-在组件内部,希望内部元素相对于组件根元素字体大小缩放时(注意:此时组件根元素设置字体大小,内部使用em)。-**rem使用场景**:-需要全局统一的尺寸基准,特别是在响应式设计中,通过媒体查询改变根元素字体大小,整个页面就会按比例调整。-避免字体大小层层嵌套带来的计算复杂性,简化布局。###相关问题:1.在CSS中,如何实现全局的响应式字体大小调整?2.使用em单位时,如何避免嵌套导致的尺寸计算混乱?3.在移动端适配中,remvw/vh单位哪个更合适?4.如何结合使用remem来构建可伸缩的组件?5.为什么在设置根元素字体大小时,通常使用百分比或62.5%?[^1]:引用[1][^2]:引用[2][^3]:引用[3][^4]:引用[4]</think>## CSS 中 em rem 单位的区别及使用场景 ### 核心区别 | **特性** | **em** | **rem** | |----------------|-----------------------------------|-----------------------------------| | 参照基准 | 相对于**当前元素**的字体大小 | 相对于**根元素(html)**的字体大小 | | 继承性 | 受父元素字体大小影响 | 不受父元素影响 | | 计算方式 | 1em = 当前元素的 font-size 值 | 1rem = 根元素的 font-size 值 | | 嵌套影响 | 多层嵌套时尺寸会累积变化 | 始终保持不变 | ### 详细说明 #### 1. em 单位 - **计算原理**: `1em = 当前元素的 font-size 值`。如果当前元素未设置字体大小,则继承父元素的字体大小。 - **嵌套问题**(见引用[3]): ```html <div class="parent" style="font-size: 18px"> <div class="child" style="font-size: 2em"> <!-- 实际尺寸:2 × 18px = 36px --> </div> </div> ``` #### 2. rem 单位 - **计算原理**: `1rem = 根元素(html)的 font-size 值`。默认情况下 `1rem = 16px`(浏览器默认值)。 - **稳定特性**(见引用[2][3]): ```html <html style="font-size: 14px"> <div class="child" style="font-size: 2rem"> <!-- 实际尺寸:2 × 14px = 28px --> </div> </html> ``` ### 使用场景对比 | **场景** | **推荐单位** | **原因** | |------------------------|--------------|--------------------------------------------------------------------------| | 响应式布局 | ✅ rem | 只需修改根字体大小即可全局调整所有尺寸(见引用[4]) | | 组件内部相对尺寸 | ✅ em | 按钮内边距/图标大小等相对于组件字体大小 | | 避免嵌套尺寸累积 | ✅ rem | 不受父元素影响,保持尺寸稳定 | | 媒体查询 | ✅ rem | 与根字体联动,实现整体缩放效果 | | 精确像素级控制 | ⚠️ px | 固定尺寸场景(非响应式) | ### 最佳实践建议 1. **全局基准设置**(推荐): ```css html { font-size: 62.5%; /* 1rem = 10px (16px × 0.625) */ } .element { font-size: 1.6rem; /* =16px */ padding: 2rem; /* =20px */ } ``` 2. **组合使用方案**: ```css /* 根元素控制全局比例 */ html { font-size: 18px; } /* 组件内使用em保持比例 */ .button { font-size: 1rem; /* 18px */ padding: 0.5em 1em; /* 9px × 18px */ border-radius: 0.3em; /* 5.4px */ } ``` 3. **响应式调整**: ```css @media (max-width: 768px) { html { font-size: 14px; /* 所有rem单位自动缩放 */ } } ``` ### 关键总结 - 选择 **rem**:当需要**全局一致性****响应式缩放**时(布局/间距/媒体查询) - 选择 **em**:当需要**组件内部比例协调**时(内边距/圆角/图标等) - 避免滥用 **px**:仅在需要固定尺寸且无需响应时使用(见引用[4]) > 现代Web开发中,rem因其简化响应式设计尺寸管理的能力,已成为主流选择[^4]。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值