CSS中的那些相对单位

原创已于 2024-03-28 11:04:50 修改 · 493 阅读

11 ·

CC 4.0 BY-SA版权

文章标签：

#css #前端

于 2024-03-28 11:00:37 首次发布

本文介绍了CSS中的rem、vw、vh等单位，它们分别基于根元素字体大小、视口宽度和视口尺寸的百分比，是实现网页自适应设计的关键。

em：相对于自身字体大小。

rem：相对于根元素字体大小。

1rem = 根元素html的字体大小 = 16px

vw：设备视口宽度的百分比 v：viewport w：width

1vw = 视口宽度的百分之一

vmin：相对于视口宽度和高度的较小者。

vmax：相对于视口宽度和高度的较大者。

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

老颖宁

关注关注

6
点赞
踩
11

收藏

觉得还不错? 一键收藏
1
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

CSS单位完全指南

前端小巷子的博客

04-27

1448

在前端开发中，CSS 单位的选择直接影响着页面的布局效果和响应式表现。本文将系统介绍 CSS 中各种单位的特性、使用场景和最佳实践，帮助你做出更明智的选择。

CSS中的相对单位

ikun的博仔的博客

07-18

1273

解析CSS中的相对单位

1 条评论您还未登录，请先登录后发表或查看评论

html css相对单位

weixin_30411997的博客

06-12

260

p{ background:grey; color:white; font-size:0.5in; height:2em; width:50%; } height：2em意思就是屏幕上显示的的高度为字号的2倍 font-size:0.5in;就是html的字号设置为0.5英寸，是绝对值 width:50% 宽度为浏览器的0.5 css相对...

【深入理解CSS】相对单位

weixin_66749281的博客

07-23

461

在CSS中内可以声明一个变量，为它赋值，然后在样式表的其他地方引用这个值，可以减少重复和修改。root{#369;}p{color}同时，你也可以在后面加上另一个参数以提供备用值。root{#369;}p{color}动态改变自定义属性root{#fff;#000;1rem;padding1em;border0.5em;color0;0.8em;bold;}.dark{2em;padding1em;#999;...

CSS中的相对单位——长度和视口相对单位

Poggie的博客

01-20

1237

提示：如果知道字号的像素值，但是想用em声明，可以用一个简单的公式换算：用想要的像素大小除以父级（继承）的像素字号。对大多浏览器而言，默认字号大小为16px。准确地说，medium关键字的值是16px。当视口大小变化时，元素大小会逐渐过渡，而不是在某个断点突然改变。但是在视口越来越大或者越来越小之后，元素大小会出现极端情况，不能很好适应视口。calc()函数内可以对两个及其以上的值进行基本运算。在根节点用calc（）设置字号可以使得不用媒体查询就实现了大部分的响应式策略。

CSS—相对单位em

雷雨天的雷胖子

12-29

1058

目录一、概述二、详解三、注意事项一、概述 em是一个相对长度单位，它的单位长度取决于当前元素行内文本的字体尺寸，如当前元素行内文本的字体尺寸未设置，则相对于浏览器的默认字体尺寸。em最初是指字母M的宽度，故名em，现指字符宽度的倍数，用法类似百分比，如：0.8em、1.2em、2em等。 em可以设置width、height、line-height、margin、padding...

浅谈CSS中的尺寸单位

09-24

在本文中，我们将详细探讨各种尺寸单位，包括绝对单位和相对单位，以及一些特殊的运算单位和比例单位。 1. **绝对单位**： - **px (像素)**：像素是最常见的单位，它基于设备的物理分辨率，如显示器的像素密度。...

了解和使用CSS中的rem单位

01-08

CSS中的`rem`（root em）单位是一种相对长度单位，用于表示元素的尺寸相对于文档根元素（通常是`<html>`）的字体大小。这个单位在Web设计中被广泛使用，因为它提供了一种更加灵活和一致的方式来控制页面布局，特别是...

老生常谈CSS中的长度单位

01-21

本文分为绝对长度单位和相对长度单位来介绍CSS中的长度单位的主要知识绝对长度单位绝对长度单位代表一个物理测量像素px(pixels) 在web上，像素px是典型的度量单位，很多其他长度单位直接映射成像素。最终，他们...

CSS单位

huyao的博客

04-16

523

CSS 中的单位有很多，这里主要介绍目前常用的及未来必备的几个单位。pxpx 是 pixels（像素）的缩写，是一种绝对单位，用于屏幕显示器上，传统上一个像素对应于计算机屏幕上的一个点，而对于高清屏则对应更多。任何现代显示屏，不管是手机，平板，笔记本还是电视都是由成千上万的像素组成的，所以我们可以使用这些像素来定义长度。另外 CSS 将光栅图像(如照片等)的显示方式定义为默认每一个图像大小为“1p...

重学CSS之相对单位（一）

weixin_49172439的博客

06-16

515

响应式——在CSS中指的是样式能够根据浏览器窗口的大小有不同的“响应”。这要求有意地考虑任何尺寸的手机、平板设备，或者桌面屏幕。如果给一个元素设置800px的宽度，在小窗口下会是什么样？水平菜单如果无法在一行显示会是什么样？在写CSS的时候，我们既要考虑整体性，也要考虑差异性。当有很多方法解决同一个问题时，我们要选择能够兼顾更多情况的方法。相对单位就是CSS用来解决这种抽象的一种工具。我们可以基于窗口大小来等比例地缩放字号，而不是固定为14px，或者将网页上的任何元素的大小都相对于基础字号来设置，然后只用改

CSS 单位

qq_30436011的博客

09-02

1282

在不同的设备之间，每 1 个 CSS 像素所代表的物理像素是可以变化的。当DOM元素嵌套加深时，并且同时给很多层级显式的设置了font-size的值的单位是em，那么就需要层层计算，复杂度会很高。当使用这个单位时，无论显示器的分辨率是多少，打印在纸上的结果都是一样的。这些单位比较适合用于创建全视区界面，例如移动设备的界面，因为元素是根据视区的尺寸而变化的，与文档树中的任何元素都没有关系。这四个单位都是视窗单位，所谓的视窗，在web端指的就是可视区域，移动端的视窗指的就是布局视窗。

css中的单位

lap2004的专栏

02-12

616

最近阅读《深入解析css》，对css中的知识进行了总结，现将一些知识进行整理，便于应用。相对单位 em rem css中绝对单位为px。相对单位有em rem(root em) 1em相当于一个当前元素的字号。如果当前字体指定为16px,则em就是16px，在设置padding、height 等时，常用这些相对单位。 html文档中，根节点为所有元素组节点，他有个伪类选择器（：root）等于类型选择器html。rem为root em 简写是指相对于根节点的字号大小。作者在使用中，

【CSS】相对长度、绝对长度

qq_42347235的博客

05-26

2320

相对长度 em：字体的尺寸，比如当前字体大小为18px，则2em=36px ex：英文字母“x”的高度 ch：数字0的宽度 rem：root em 分两种情况，作用于非根元素时，其大小相对于根元素大小；作用于根元素时，其大小相对于初始大小 vw：view width 视窗宽度，1vw=1%视窗大小，100vw占满整个视窗 vh：view height 视窗高度，同上 vmin：vw和vh中较小的 vmax：vw和vh中较大的 %：相对于父元素的百分比绝对长度 cm：厘米 mm：毫米 in：inch

一文读懂 CSS 单位

lsq191690的博客

08-22

1762

说起 CSS 单位，我们最常用的可能就是像素单位（px），它是一个绝对单位，也就是说一个10px的文字，放在哪里都是一样大的。单位可以影响颜色、距离、尺寸等一系列的属性。CSS中单位的形式有很多种，下面就来学习一下 CSS 中单位！

CSS常见单位汇总

ITKidKid的博客

08-16

2745

CSS常见单位汇总

【CSS】相对长度单位绝对长度单位,vw/vh , rem等

freedomVenly的博客

01-29

3958

相对单位：（一般用于对屏幕分辨率兼容较高的项目，可以使用不同设备的大小）单位描述 em ems始终相对于应用在当前元素的字体尺寸，所以它也是相对长度单位。一般浏览器字体大小默认为16px，则2em == 32px； ex 依赖于英文字母小 x 的高度 ch 数字 0 的宽度 ...

html 左右比例,CSS百分比padding都是相对宽度计算

weixin_39900023的博客

06-17

396

一、CSS百分比padding都是相对宽度计算的在默认的水平文档流方向下，CSSmargin和padding属性的垂直方向的百分比值都是相对于宽度计算的，这个和top,bottom等属性的百分比值不一样。这么设计的原因在我的新书(应该不出几个月就要出版了)中会有说明，这里不展开。对于padding属性而言，任意方向的百分比padding都现对于宽度计算可以让我们轻松实现固定比例的块级容器，举个...

CSS相对屏幕宽度,如何在CSS3中创建相对于屏幕宽度的真正响应式排版

weixin_36462640的博客

08-04

300

但是，这仍然没有得到广泛支持 . 我发现的最好的方法是将每个分辨率的字体调整应用于html选择器(下面的示例) . 您只在移动视图中声明基本字体大小，并使用“rem”值(相对于根选择器)逐步增强 .值得注意的是，IE 8，Opera Mini和iOS Safari 3.2并没有在简写"font"属性中支持它 . 所以这取决于您的浏览器支持需求 . 使用px值作为回退会破坏相对单位的目的，所以......

css中的相对单位

最新发布

11-12

<think>首先，用户的问题是：“我想了解CSS中相对单位的相关信息请问CSS相对单位介绍”。根据系统指令，我需要使用中文回答，并且结构清晰，帮助用户逐步解决问题。系统指令还要求： - 所有行内数学表达式使用 `$...$` 格式。 - 独立公式使用 `$$...$$` 格式。 - LaTeX语法正确。 - 生成相关问题（在最后添加§§相关问题§§）。 - 在引用段落末尾添加引用标识，如 `[^1]`。用户提到的引用内容是关于CSS相对单位的： - 引用[1]: 解释了相对单位分为字体相对单位和浏览器窗口相对单位，例如em、rem、vw、vh等。 - 引用[2]: 详细讨论了em和rem的使用，包括设置内边距、定义字体大小等。 - 引用[3]: 列出了各种相对单位及其描述（em、ex、ch、rem、vw、vh、vmin、vmax）。 - 引用[4]: 讨论了px作为相对单位，是虚拟像素。用户说这些引用仅供参考，不是真正的需求，我应该参考用户上一次的问题和我的回答。但在这个对话中，这是第一条消息，所以没有上一个问题。用户的当前问题是关于CSS相对单位的介绍。我的回答应该基于提供的引用内容，因为它们直接相关。我需要整合这些信息，给出一个清晰的介绍。结构化回答： 1. **引言**：简要解释什么是CSS相对单位。 2. **主要类型**：分为字体相对单位和浏览器窗口相对单位，基于引用[1]。 3. **详细单位说明**： - em（引用[1],[2],[3]） - rem（引用[1],[2],[3]） - vw、vh、vmin、vmax（引用[1],[3]） - 其他如ex、ch（引用[3]） - px作为相对单位（引用[4]） 4. **使用场景和优点**：为什么使用相对单位，例如响应式设计。 5. **示例**：提供简单代码示例来展示如何使用这些单位。 6. **总结**。 7. **生成相关问题**：在最后添加§§相关问题§§。确保引用：当引用特定段落时，在末尾添加引用标识，如 `[^1]`。例如，如果我提到em的定义，我可以引用[3]。关于LaTeX：用户的问题是关于CSS的，没有明显的数学表达式，所以可能不需要使用LaTeX。但系统指令要求所有行内数学表达式使用 `$...$`，所以我应该检查是否需要。CSS单位本身不是数学表达式，但如果有类似于计算的描述，比如 `1em = 16px`，我可以使用LaTeX，但这不是必须的。指令说“包括变量、不等式、方程等”，所以如果没有，就不需要强制使用。为了安全，我可以在描述尺寸计算时使用行内数学表达式，比如 `$1em = 16px$`（如果浏览器默认字体大小）。最终，生成相关问题：基于CSS相对单位，提问相关问题。完整结构： - 回答部分：清晰、分步骤介绍。 - 相关问题部分：单独一节。现在，制定内容大纲： 1. **什么是CSS相对单位？** - 定义：相对单位是相对于另一个长度或尺寸的单位，而不是固定值（如像素）。这使得设计更灵活响应。[基于引用[1]和[3]] 2. **主要分类**： - **字体相对单位**：基于字体大小定义的单位。 - em: 相对于当前元素的字体大小。例如，如果当前元素font-size为16px，则1em=16px。[引用[3]] - rem: 相对于根元素（html）的字体大小。例如，根font-size为16px，则1rem=16px。[引用[3]] - ex: 相对于小写字母x的高度。[引用[3]] - ch: 相对于数字0的宽度。[引用[3]] - **浏览器窗口相对单位**：基于视口（viewport）尺寸的单位。 - vw: 视口宽度的1%。[引用[3]] - vh: 视口高度的1%。[引用[3]] - vmin: vw和vh中较小的一个。[引用[3]] - vmax: vw和vh中较大的一个。[引用[3]] 3. **特殊单位**： - px: 虽然常被视为绝对单位，但实际上是相对单位（虚拟像素），相对于设备的显示分辨率。[引用[4]] 4. **优点**： - 响应式设计：自动适配不同设备和屏幕尺寸。 - 可访问性：用户调整字体大小时，布局能自适应。 5. **使用示例**： - 代码片段展示简单CSS使用em、rem、vw等。 6. **总结**：强调重要性在现代web设计中。 7. **相关问题**：添加3个左右的问题。引用标识： - 当直接引用时添加，如 `[^1]`、`[^2]`等。需要指定来源引用。生成相关问题：例如： 1. 如何选择在CSS中使用em还是rem？ 2. 使用vw和vh单位时需要注意什么？ 3. CSS相对单位在响应式设计中的最佳实践是什么？ </think>### CSS相对单位介绍在CSS中，相对单位是一种基于其他参考值动态计算的长度单位，而不是固定值（如像素）。这使得布局更具响应性和灵活性，尤其在适配不同设备或用户设置时[^1]。根据您的需求，我将基于引用内容逐步介绍CSS相对单位的核心概念、分类和使用场景。 #### 一、相对单位的主要分类 CSS相对单位分为两大类： 1. **字体相对单位**：基于元素的字体大小（`font-size`）定义。 2. **浏览器窗口相对单位**：基于视口（viewport）的大小定义，例如视口宽度或高度[^1][^3]。下面详细说明常见单位及其用法。 #### 二、常见字体相对单位这类单位以当前或根元素的字体尺寸为基准： - **em**： 1em 等于当前元素的 `font-size` 值。例如，如果元素的 `font-size` 为 16px，则 `padding: 1.5em;` 计算为 24px。em 常用于内边距、外边距或字体大小定义，因为它能继承父元素的字体设置[^1][^2]。但在嵌套元素中（如多级列表），em 可能导致尺寸累积缩放问题[^2][^3]。 - **rem**： 1rem 等于根元素（通常是 `<html>`）的 `font-size` 值。例如，默认根字体大小为 16px，则 `font-size: 1.25rem;` 计算为 20px。rem 避免了 em 的嵌套缩放问题，因此更适合定义全局字体大小或布局组件[^1][^2][^3]。 - **ex**： 1ex 等于当前元素中小写字母 “x” 的高度（x-height），常用于文本相关设计[^3]。 - **ch**： 1ch 等于数字 “0” 的宽度，适用于等宽字体场景，如代码编辑器[^3]。 **示例代码**： ```css body { font-size: 16px; /* 根字体大小 */ } .container { padding: 1em; /* 基于父元素字体尺寸 */ font-size: 1.25rem; /* 基于根元素: 20px */ } ``` #### 三、常见浏览器窗口相对单位这类单位基于视口尺寸（viewport），非常适合响应式设计： - **vw**： 1vw 等于视口宽度的 1%。例如，在宽度为 1000px 的视口中，`width: 50vw;` 计算为 500px。vw 常用于定义响应式字体或容器宽度[^1][^3]。 - **vh**： 1vh 等于视口高度的 1%。例如，`height: 100vh;` 可使元素高度占满视口高度[^3]。 - **vmin**： 1vmin 等于 vw 和 vh 中较小的一个值（min(vw, vh)），适配小屏幕设备[^3]。 - **vmax**： 1vmax 等于 vw 和 vh 中较大的一个值（max(vw, vh)），适用于大屏幕布局[^3]。 **示例代码**： ```css .header { font-size: calc(1rem + 1vw); /* 结合 calc() 实现动态字体大小[^2] */ width: 80vw; /* 占视口宽度的80% */ } .full-height { height: 100vh; /* 占满视口高度 */ } ``` #### 四、特殊相对单位：px 虽然常被视为绝对单位，但 **px**（像素）本质上是相对单位： - px 是虚拟像素（逻辑像素），取决于设备的分辨率和显示设置。例如，在高DPI屏幕（如Retina显示器）上，1px 可能对应多个物理像素[^4]。 - 浏览器中所有长度最终都转换为虚拟像素，因此 rem、em 等在实际计算中都以 px 为基准[^4]。 #### 五、优点与适用场景 - **优点**： - 响应式设计：自动适配不同屏幕尺寸（如使用 vw/vh）。 - 可访问性：用户调整浏览器字体大小时，基于 em/rem 的布局能自适应[^1][^2]。 - 灵活性：减少媒体查询需求，简化代码维护。 - **适用场景**： - 字体大小：优先使用 rem 保持一致性。 - 布局尺寸：vw/vh 用于全屏元素（如横幅）。 - 内边距/外边距：em 基于上下文调整间距[^2]。 #### 六、总结 CSS相对单位（如em、rem、vw、vh）是现代Web设计的核心工具，通过动态计算确保布局在不同设备上的适应性[^1][^3]。合理选择单位能提升响应式效果——例如，rem 用于全局尺寸，vw/vh 用于视口相关元素。在实际开发中，结合 `calc()` 函数可进一步优化动态计算[^2]。