搞清楚CSS单位px、em、rem、vh、vw、vmin、vmax

本文深入探讨了在网页布局中应用px、em、rem、vhandvw、vminandvmax等相对长度单位的方法,通过实例展示了如何利用这些单位实现响应式设计,并介绍了在不同屏幕尺寸下调整元素大小的技巧。

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

1、px:相对长度单位。像素px是相对于显示器屏幕分辨率而言的。

2、em:相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置,则相对于浏览器的默认字体尺寸。
看下面例子:
HTML:

<body>body
<div class="div1">div1
    <div class="div2">div2
        <div class="div3">div3</div>
    </div>
</div>
</body>

CSS:

div{
    font-size:1.5em;
}

这里写图片描述

计算关系是这样的:

body的font-size是继承自跟元素html,html的尺寸是浏览器默认尺寸14px;
div1的font-size=1.5*14px = 21px;
div2的font-size=1.5*21px = 31.5px;
div3的font-size=1.5*31.5px = 47.25px;

如果手动设置div2的font-size为40px,div3的font-size应该为1.5*40px = 60px。

3、rem:相对长度单位。r’是“root”的缩写,相对于根元素<html>的字体大小。

例如还是上面的html代码,添加如下样式:

.div3{
    font-size:1.5rem;
}

这里写图片描述

此时div3的font-size = 1.5*14px = 1.5*html的font-size

4、vh and vw:相对于视口的高度和宽度,而不是父元素的(CSS百分比是相对于包含它的最近的父元素的高度和宽度)。

1vh 等于1/100的视口高度,1vw 等于1/100的视口宽度。

比如:浏览器高度900px,宽度为750px, 1 vh = 900px/100 = 9 px,1vw = 750px/100 = 7.5 px。

很容易实现与同屏幕等高的框:.slide { height: 100vh;}
设置一个和屏幕同宽的标题,h1{font-size:100vw},那标题的字体大小就会自动根据浏览器的宽度进行缩放,以达到字体和viewport大小同步的效果。

5、vmin and vmax:关于视口高度和宽度两者的最小值或者最大值。

比如,浏览器的宽度设置为1200px,高度设置为800px, 1vmax = 1200/100px = 12px, 1vmin = 800/100px = 8px。如果宽度设置为600px,高度设置为1080px, 1vmin就等于6px, 1vmax则未10.8px。

有一个元素,你需要让它始终在屏幕上可见:

.box { 
    height: 100vmin; 
    width: 100vmin;
}

这里写图片描述

如果你要让这个元素始终铺满整个视口的可见区域:

.box { 
height: 100vmax; 
width: 100vmax;
}

这里写图片描述

参考:http://j.news.163.com/docs/99/2014111814/ABBB78BG00964KGG.html

<think>好的,我现在需要回答用户关于CSS单位的问题,特别是pxemremvw这些单位各自相对于什么来计算。首先,我得回忆一下这些单位的基本定义和用法,确保自己的理解正确。 用户之前已经询问过浏览器一帧中的任务,现在转向CSS单位,可能是在学习前端开发,尤其是样式和布局部分。用户的需求可能是想明确这些单位的区别和应用场景,以便在实际开发中正确使用,避免布局问题。 首先,逐个分析每个单位: 1. **px像素)**:通常被认为是绝对单位,但实际上在CSS中,px是相对于显示设备的物理像素而言的。不过在高分辨率屏幕上,浏览器可能会将px映射为多个物理像素,以达到更清晰的显示效果。所以需要解释px的相对性,尤其是在不同设备上的表现。 2. **em**:相对单位,相对于当前元素的字体大小。如果当前元素没有设置字体大小,则继承父元素的字体大小。这一点需要注意,因为多层嵌套时,em的累积效果可能会导致意外的结果。例如,如果父元素字体是16px,子元素设置font-size: 1.2em,那么子元素的实际大小是19.2px,而如果子元素内部还有一个元素设置1.2em,就会基于19.2px计算,导致更大的尺寸。 3. **rem**:相对于根元素(html)的字体大小。默认情况下,根字体大小是16px,所以1rem等于16px。用户可以更改根字体大小,从而影响所有使用rem单位的元素。这对于响应式设计很有用,因为可以通过调整根字体大小来整体缩放布局。 4. **vw(视窗宽度单位)**:相对于视口宽度的1%。视口指的是浏览器窗口的可视区域,100vw等于视口宽度的100%。类似的有vh(视口高度)、vmin(视口较小尺寸的1%)、vmax(视口较大尺寸的1%)。这些单位适合用于需要根据视口大小调整的元素,比如全屏背景或响应式布局。 接下来,需要检查是否有遗漏的单位,比如百分比(%)、ch、ex等,但用户特别提到了pxemremvw,所以可能不需要扩展其他单位,除非有其他相关信息需要考虑。 然后,要确保每个单位的解释准确,并且给出示例,帮助用户理解。例如,当使用em作为边距或填充时,它是相对于当前元素的字体大小,而不是父元素的字体大小,这点容易混淆,需要明确说明。 另外,需要注意em在非字体属性中的应用,比如width或margin,这时候依然是相对于当前元素的字体大小。例如,如果一个div的字体大小是20px,设置margin: 1em,则margin是20px,而不是父元素的字体大小。 对于vw单位,可能需要提到在移动端和桌面端的异,以及使用时可能遇到的问题,比如在小屏幕上1vw可能太小,导致布局问题,需要结合媒体查询或其他单位使用。 总结时,可以对比这些单位的适用场景,帮助用户根据需求选择合适的单位。例如,rem适合用于整体布局和响应式设计,em适合组件内部的相对调整,vw/vh适合全屏或视口相关的布局,而px适合需要精确控制的情况,比如边框或固定尺寸元素。 最后,要确保语言简洁明了,结构清晰,使用用户容易理解的例子,避免技术术语过于复杂。可能需要用列表或表格形式呈现,但用户要求使用中文回答,所以段落结构可能更适合。</think>以下是常见 CSS 单位的相对关系总结,以清晰表格对比呈现: | 单位 | 相对对象 | 典型场景 | 特性说明 | |--------|-----------------------------------|------------------------------|--------------------------------------------------------------------------| | **px** | 设备物理像素(但受屏幕密度影响) | 边框、固定尺寸元素 | 视觉上“绝对单位”,但实际可能被缩放(如 Retina 屏幕下 1px 可能对应 2 物理像素) | | **em** | **当前元素**的 `font-size` 值 | 组件内相对尺寸(如按钮内图标)| 多层嵌套时会产生累积效果,需注意继承链 | | **rem**| **根元素(`<html>`)**的 `font-size` | 全局响应式布局 | 直接依赖根字体大小,无累积问题,适合整体缩放 | | **vw** | **视口宽度**的 1% | 全屏布局、视口适配元素 | 100vw = 视口宽度,注意移动端横竖屏切换时的变化 | | **vh** | **视口高度**的 1% | 全屏背景、垂直填充 | 100vh = 视口高度,可能受浏览器工具栏影响 | | **%** | **父元素**的对应属性 | 流式布局、比例分配 | 不同属性参照不同父属性(如 `width%` 参照父宽度,`height%` 需父有明确高度) | --- ### 详细说明与示例: #### 1. **px像素)** - **公式**:$1px = 设备物理像素 \times 缩放因子$ - **示例**: ```css .box { width: 300px; } /* 在普通屏幕为 300 物理像素,Retina 屏可能映射为 150 物理像素 ×2 缩放 */ ``` - **注意**:在高分辨率屏幕下,浏览器会自动处理缩放,开发者无需手动调整。 #### 2. **em** - **公式**:$1em = 当前元素的 font-size 值$ 若元素未设置 `font-size`,则继承父级值。 - **示例**: ```css .parent { font-size: 16px; } .child { font-size: 1.2em; /* 16px × 1.2 = 19.2px */ margin: 2em; /* 19.2px × 2 = 38.4px(基于自身 font-size) */ } ``` #### 3. **rem** - **公式**:$1rem = 根元素(html)的 font-size 值$ 默认根字体大小为 $16px$,可通过 `html { font-size: 62.5%; }` 改为 $10px$ 方便计算。 - **示例**: ```css html { font-size: 16px; } .box { width: 20rem; /* 16px × 20 = 320px */ padding: 1.5rem; /* 16px × 1.5 = 24px */ } ``` #### 4. **vw / vh(视口单位)** - **公式**: $1vw = 视口宽度的 1\%$ $1vh = 视口高度的 1\%$ - **示例**: ```css .fullscreen { width: 100vw; /* 占满视口宽度 */ height: 50vh; /* 视口高度的 50% */ } ``` #### 5. **%(百分比)** - **相对规则**: - `width`、`padding`、`margin` 等水平属性 → **父元素宽度** - `height` → **父元素高度**(需父元素有明确高度) - `font-size` → **父元素字体大小** - **示例**: ```css .parent { width: 400px; } .child { width: 50%; /* 400px × 50% = 200px */ height: 50%; /* 无效,除非父元素有明确高度 */ } ``` --- ### 使用建议: - **响应式布局**:优先用 `rem` + 媒体查询调整根字体大小,或结合 `vw`(如 `html { font-size: 2vw; }`)。 - **组件内适配**:使用 `em` 保持组件内部比例一致性(如按钮的 `padding` 与字体大小联动)。 - **全屏适配**:`vw/vh` 适合视口填充,但需测试移动端兼容性(如 iOS Safari 对 100vh 的处理异)。 - **精确控制**:`px` 适合边框、小图标等无需缩放的场景。
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值