CSS单位 vh vw vmin vmax rem

最新推荐文章于 2025-05-30 13:21:12 发布

原创最新推荐文章于 2025-05-30 13:21:12 发布 · 627 阅读

0 ·

CC 4.0 BY-SA版权

html 专栏收录该内容

10 篇文章

订阅专栏

本文介绍了视口单位vw、vh、vmin、vmax的使用方法，以及如何利用CSS calc()函数进行复杂的布局计算。此外，还讲解了字体大小的转换公式及em和rem单位的应用技巧。

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

视口（viewpoint）的宽度或者高度
vw: 视口宽度的 1/100
vh: 视口高度的 1/100
vmin: 视口高度和宽度之间的最小值的 1/100
vmax: 视口高度和宽度之间的最大值的 1/100

calc() 计算CSS属性值

.foo {
  --widthA: 100px;
  --widthB: calc(var(--widthA) / 2);
  --widthC: calc(var(--widthB) / 2);
  width: var(--widthC);
}

普通文本段落的默认字体大小是16px
字体转换公式
将px转换为 em：pixels/16=em
fontsize

body选择器中声明 font-size=62.5%；
将你的原来的px数值除以10，然后换上em作为单位；
重新计算那些被放大的字体的em数值。避免字体大小的重复声明。

rem: root em
相对大小只是HTML根元素

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

数星星的夜晚

关注关注

0
点赞
踩
0

收藏

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

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

CSS3中的vw和vh单位 - 编程指南

2301_79326559的博客

09-23

403

在CSS3中，vw和vh单位提供了一种相对于浏览器视窗大小的百分比单位。它们可以用于创建响应式的布局和样式，使得元素的大小可以根据视窗尺寸自动调整。通过使用vw和vh单位，我们可以更轻松地开发适应不同屏幕大小的网页。希望本文对你理解vw和vh单位有所帮助！

css3中单位px,em,rem,vh,vw,vmin,vmax的区别及浏览器支持情况

09-24

CSS3中的长度单位用于表示网页中元素的尺寸、间距、位置等属性，主要包括像素单位(px)、相对长度单位(em、rem)、视口单位(vh、vw、vmin、vmax)以及其它一些单位(如%、in、cm、mm、pt、pc、ex、ch等)。以下是对这些...

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

#**css**单位

weixin_30278237的博客

02-24

118

css单位 css单位 CSS 网络安全字体 CSS 颜色尺寸单位描述 % 百分比 in 英寸 cm 厘米 mm 毫米 em 1em 等于当前的字体尺寸。 2em 等于当前字体尺寸的两倍。例如，如果某元素以 12pt 显示，那么 2em 是24pt。在 CSS 中，em 是非常有用的单位，因为它可以自动适应用户所使用的字体。 ex 一个 ex 是一个字体的 ...

CSS 单位全解析：从 px 到 rem/em/vh/vw，零基础学会尺寸换算与响应式设计

热门推荐

全易

09-30

2万+

vw：视窗宽度的百分比（1vw 代表视窗的宽度为 1%） vh：视窗高度的百分比（ 1vh 代表视窗的高度为 1%） vmin：当前 vw 和 vh 中较小的一个值 vmax：当前 vw 和 vh 中较大的一个值 vw、vh与 % 的区别： % 是相对于父元素的大小设定的比率，vw、vh 是视窗大小决定的。 vw、vh 优势在于能够直接获取高度，而用 % 在没有设置 body高...

css 布局单位 vh

qq_35226176的博客

01-28

498

vh 可视区域单位 vh：1vh等于视口高度的1%，100则满屏，50则半屏详细请看 css3自适应布局单位vw,vh详解

postcss-px-to-viewport:PostCSS的插件，可从像素单位生成视口单位（vw，vh，vmin，vmax）。通过一个设计尺寸在不同的显示器上创建可扩展界面的最佳选择

05-02

的插件，从像素单位生成视口单位（vw，vh，vmin，vmax）。演示版如果您的项目涉及固定宽度，则此脚本将有助于将像素转换为视口单位。输入 . class { margin : -10 px .5 vh ; padding : 5 vmin 9.5 px 1 px ; ...

CSS 中px、em、rem、%、vw、vh单位之间的区别详解

11-21

vmin和vmax分别代表vw和vh中的最小值和最大值，它们提供了一种更灵活的方式来适应不同的屏幕尺寸。在实际应用中，应根据设计需求选择合适的单位。例如，对于固定尺寸的元素，px可能是最佳选择；对于需要随父元素...

纯css3使用vw和vh实现自适应的方法

09-24

相比媒体查询（Media Queries）和基于rem的动态计算，使用vw和vh单位可以避免响应式布局的断层现象，同时也无需JavaScript来动态调整根元素的字体大小。这种方法既保持了CSS的纯粹性，又实现了跨设备的完美适配。 ...

CSS单位之vw、vh、vmin、vmax、%

时光清浅处，一步一安然

02-14

4128

视窗(Viewport)是指浏览器内部的可视区域大小，即window.innerWidth/window.innerHeight大小，不包含任务栏标题栏以及底部工具栏的浏览器区域大小。position:absolute时，将相对于其相对的元素宽度（递归父元素直到第一个设置了position的元素）。注意：position:fixed时，无论当前元素放在哪里，将相对于窗口宽度。1vh 等于1/100的视窗高度，1vw 等于1/100的视窗宽度。下面通过一个例子来说明。下面是用一个例子来说明。

css单位-vh/vw

qq_43260366的博客

09-03

1925

视口单位(Viewport units) 1.什么是视口？在pc端，视口指的是浏览器的可视区域；在移动端，它涉及3个视口： Layout Viewport（布局视口）， Visual Viewport（视觉视口）， Ideal Viewport（理想视口） 2.视口单位中的“视口”：在pc端，指的是浏览器的可视区域；在移动端，指的就是Viewport中的Layout Viewport(布局视口) 即window.innerWidth/window.innerHeight大小

css实现自适应之单位vh

weixin_52418790的博客

12-26

2481

vh（Viewport Height）是前端开发中的一个动态单位，是一个相对于网页视口（Viewport）的单位。（与vh一起的还有vw（Viewport Width））在桌面端，视口指的是浏览器的可视区域即window.innerWidth/window.innerHeight大小，不包含任务栏标题栏以及底部工具栏的浏览器区域大小。系统会将视口的高度分为100份，1vh就占用视口高度的百分之一（宽度同） 1vh等于视口高度的1%（1vw等于视口宽度的1%）。 vw和vh与百分比不同的是，百分比永远

CSS的单位介绍：em，rem，vh，vw，px，pt，vmin，vmax

大剑师兰特的GIS世界

03-12

1322

- `em`：相对于元素自身的字体大小，1em等于当前元素的font-size。 - `rem`（root em）：相对于根元素（HTML元素）的字体大小。 - `vw`（viewport width）：视口宽度的百分比，1vw等于视口宽度的1%。 - `vh`（viewport height）：视口高度的百分比，1vh等于视口高度的1%。 - `vmin`（viewport minimum）：视口宽度或高度中较小的那个的百分比。 - `vmax`（viewport ma

CSS---CSS3新增的vw vh单位

前端与计算机相关知识的分享，博主的qq523235674

02-15

1761

CSS3中新增了一种视口单位 vw和vh，何谓视口，就是根据你浏览器窗口的大小的单位，不受父元素影响。在移动端，视口单位相对于布局视口。 1vw=可视窗口宽度的百分之一，比如窗口宽度是750，则1vw = 7.5px· 1vh =可视窗口高度的百分之一，比如窗口高度是667，则1vh = 6.67px 使用它唯一需要注意的就是它的兼容性: ①在PC端已兼容到IE9 ②在移动端iOS 8以上以及Android 4.4以上获得支持，并且在微信×5内核中也得到完美的全面支持Vue本身都只兼容到.

css单位

HeyOldThiefSima的博客

04-08

360

用于指定图像的分辨率，特别是在使用背景图像时。: 在CSS Grid布局中，用于分配网格轨道的大小比例。例如，如果根元素的字体大小为12px，那么1rem就等于12px。例如，如果一个元素的字体大小为16px，那么1em就等于16px。: 分别代表vw和vh中较小或较大的一个，用于创建在不同屏幕尺寸下都能保持相对大小的布局。: 这是最常见的单位，用于指定元素的大小。: 如前所述，用于长度属性，表示相对于父元素的大小。: 弧度，是角度的另一种表示方式。: 梯度，是一种旧的角度单位。

CSS单位

lwf的博客

01-01

507

css单位：绝对单位：cm mm in pt pc，在前端开发过程中不会用到相对单位：px % em rem 1 px：如果不考虑分辨率，可以把px当做绝对单位来对待 2 %：支持百分比单位的属性，大致可分为3类： 1 width height font-size的百分比是相对于父元素的“相同属性”的值来设置的； 2 line-height是相对于父元素的font-size的值来设置的； 3 v

CSS尺寸单位详解：兼容与实战应用

- **视口高度和宽度单位** (`vh`, `vw`, `vmin`, `vmax`): 基于视口尺寸的相对单位，分别表示视口高度、宽度的百分比，以及两者较小值和较大值。 3. 运算 CSS提供了`calc()`函数，允许混合使用不同单位进行计算，...