vw/vh/vmin/vmax/em/rem/%/px的区别

最新推荐文章于 2024-04-22 13:56:59 发布
最新推荐文章于 2024-04-22 13:56:59 发布
阅读量119 收藏
点赞数
文章标签： javascript 开发语言 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44709363/article/details/130959152
版权
这篇文章介绍了CSS中与视窗尺寸相关的单位vw,vh,vmin,vmax，以及相对根元素大小的单位rem。1vw等于视口宽度的1%，1vh等于视口高度的1%，vmin和vmax分别对应视口的最小和最大尺寸。同时提到了em和px等其他常见单位。
摘要由CSDN通过智能技术生成

vw/vh/vmin/vmax/em/rem/%/px:
     vw/vh:相对于视窗的宽和高     1vw=视口宽/100    1vh=视口高/100
     vmin/vmax：取视窗宽和高的最小值作为基准/取视窗宽和高的最大值作为基准    1vmin=1080px/100=10.8px     1vmax=1920px/100=19.2px

rem：相对根元素的大小

Yanshuxiaxx
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
开发单位 vmin/vmax
zk_html的博客
11-22 2471
以前，写过一个仿B站移动端的项目；当时，项目适配用的是 vw，而现在B站移动端适配用的是 vmin，想了解 vmin/vmax 单位的作用，还有为什么B站移动端适配要采用 vmin。vw：与视口的宽度有关，1vw 就是视口宽度的 1%vh：与视口的高度有关，1vh 就是视口高度的 1%vmin：与当下视口的宽度和高度的最小值有关，取值为vw和vh中较小的那个vmax：与当下视口的宽度和高度的最大值有关，取值为vw和vh中较大的那个。
vmin 和 vmax的区别
zhaojiaxing123的博客
04-11 1128
vmin 和 vmax的区别
CSS新单位：vmin和vmax
weixin_53653634的博客
11-07 1383
在响应式网页设计中，我们经常需要根据视口的尺寸来设置元素的大小。vmin和vmax。
vmin、vmax用处
weixin_42835782的博客
12-03 2210
vmin、vmax用处 100vmin指的是屏幕宽和高中较小的那个 100vmax指的是屏幕宽和高中较大的那个 做移动页面开发时，如果使用 vw、wh 设置字体大小（比如 5vw），在竖屏和横屏状态下显示的字体大小是不一样的。 由于 vmin 和 vmax 是当前较小的 vw 和 vh 和当前较大的 vw 和 vh。这里就可以用到 vmin 和 vmax。使得文字大小在横竖屏下保持一致。 ...
css的单位：vmin和vmax
2301_77007887的博客
04-20 366
页面中有一张图片，位置居中，宽高单位设置为vmin；改变窗口的大小，图片始终在页面中居中。vmax：与当前视口的高度和宽度有关，取值为 vw 和。vw：与视口的宽度有关，1vw 就是视口宽度的 1%vh：与视口的高度有关，1vh 就是视口高度的 1%vw，vh，vmin，vmax都可以用来做适配。vmin：与当前视口的高度和宽度有关，取值为。
CSS-vmin&vmax单位
最新发布
若末lan的博客
04-22 371
例如，如果视口宽度为 800px，高度为 1000px，那么 1vmax 等于 10px（1000px 的 1%）。例如，如果视口宽度为 800px，高度为 1000px，那么 1vmin 等于 8px（800px 的 1%）。vmin和vmax是相对于窗口视图来说的，与父级元素等无关，vmin 和 vmax 单位。
vmin vs vmax_MinMaxing：了解CSS中的vMin和vMax
cungui5726的博客
08-24 497
vmin vs vmaxI’ve covered the very useful vw and vh CSS units in a previous article, but the related vmin and vmax units are far less known and generally poorly understood. This is unfortunate, as the ...
网站开发进阶（六十六）CSS3 - 新单位vmin/vmax与旧单位ex/ch使用详解
IT全栈 华强工作室
04-13 2436
前言 vw、vh、vmin、vmax 的含义 （1）vw、vh、vmin、vmax 是一种视窗单位，也是相对单位。它相对的不是父节点或者页面的根节点。而是由视窗（Viewport）大小来决定的，单位 1，代表类似于 1%。 视窗(Viewport)是浏览器实际显示内容区域，换句话说是不包括工具栏和按钮的网页浏览器。 （2）具体描述如下： vw：视窗宽度的百分比（1vw 代表视窗的宽度为 1%） vh：视窗高度的百分比 vmin：当前 vw 和 vh 中较小的一个值 vmax：当前 vw 和 vh 中较大的
CSS单位之vw、vh、vmin、vmax、%
时光清浅处，一步一安然
02-14 3605
视窗(Viewport)是指浏览器内部的可视区域大小，即window.innerWidth/window.innerHeight大小，不包含任务栏标题栏以及底部工具栏的浏览器区域大小。position:absolute时，将相对于其相对的元素宽度（递归父元素直到第一个设置了position的元素）。注意：position:fixed时，无论当前元素放在哪里，将相对于窗口宽度。1vh 等于1/100的视窗高度，1vw 等于1/100的视窗宽度。下面通过一个例子来说明。下面是用一个例子来说明。
px、%、em、vw、vh、vmax、vmin、rem区别
qq_45152044的博客
03-28 2551
px 很多人都认为它是一个固定单位，但其实它是个相对单位。它是相对于屏幕的分辨率的，但平时会把它当固定单位来用，毕竟谁写个页面老是切换自己电脑分辨率来看变化。 % 相对于自己的父级，父子关系哈，不是爷孙关系。只是相对于自己的父级。 em 相对于自己的字体大小。具体就是，如果自己设置了字体大小，那么你设置width:1em;就会相对于自己，如果自己没有设置，它就会逐级向上找或者说它自己继承于谁的字体大小，如果谁都设置字体大小，那就是浏览器默认的字体大小，就是16px，此时就是1em=16px了。所以一定不要以
matplotlib的imshow函数显示灰度图像要设置vmin和vmax2个参数
weixin_42272768的博客
06-08 4590
matplotlib的imshow函数在显示灰度图像的时候要设置vmin和vmax2个函数
说说em/px/rem/vh/vw的区别
树上骑个猴的博客
03-31 2620
一、介绍 传统的项目开发中，我们只会用到px、%、em这几个单位，它可以适用于大部分的项目开发，且拥有比较良好的兼容性 从CSS3开始，浏览器对计量单位的支持又提升到了另外一个境界，新增了rem、vh、vw、vm等一些新的计量单位 利用这些新的单位开发出比较良好的响应式页面，适应多种不同分辨率的终端，包括移动设备等 二、单位 在css单位中，可以分为长度单位、绝对单位，如下表所指示 CSS单位 相对长度单位 em、ex、ch、rem、vw、vh、vmin、vmax、% 绝对长度单位 cm、mm、in、px
CSS3 - 新单位vw、vh、vmin、vmax使用详解（附样例）
weixin_30877181的博客
06-12 777
像px、em这样的长度单位大家肯定都很熟悉，前者为绝对单位，后者为相对单位。CSS3又引入了新单位：vw、vh、vmin、vmax。下面对它们做个详细介绍。 一、基本说明 1，vw、vh、vmin、vmax 的含义 （1）vw、vh、vmin、vmax是一种视窗单位，也是相对单位。它相对的不是父节点或者页面的根节点。而是由视窗（Viewport）大小来决定的，单位1，代表类似于...
搞清楚CSS单位px、em、rem、vh、vw、vmin、vmax
javaloveiphone的专栏
04-11 2万+
1、px：相对长度单位。像素px是相对于显示器屏幕分辨率而言的。2、em：相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。 看下面例子： HTML:<body>body <div class="div1">div1 <div class="div2">div2 <div class="div3">div3
css3新单位vw、vh、vmin、vmax的使用详解（附样例）
JoeBlackZQQ的专栏
08-23 2284
From: http://www.hangge.com/blog/cache/detail_1715.html 像 px、em 这样的长度单位大家肯定都很熟悉，前者为绝对单位，后者为相对单位。CSS3 又引入了新单位：vw、vh、vmin、vmax。下面对它们做个详细介绍。   一、基本说明 1，vw、vh、vmin、vmax 的含义 （1）vw、vh、vmin、vmax 是一种视窗单位...
[css] 你有使用过vmax和vmin吗？说说你对它们的理解
歌谣的博客
02-06 1561
[css] 你有使用过vmax和vmin吗？说说你对它们的理解 vmax和vmin都是相对于窗口大小的长度单位。 100vmax相当于100%当前窗口长或者宽的长度，取其中最大值，vmin反之。 如果css函数max()和min()普及后，100vmax相当于max(100vw, 100vh) 个人最常用的是vmin，可以在确保在保持宽高比的情况下，不论窗口如何缩放都可以不让元素超出窗口范围。 个人简介 我是歌谣，欢迎和大家一起交流前后端知识。放弃很容易， 但坚持一定很酷。欢
css3中单位px,em,rem,vh,vw,vmin,vmax的区别及浏览器支持情况
热门推荐
Jin's blog
01-11 12万+
css3中单位px,em,rem,vh,vw,vmin,vmax的区别及浏览器支持情况
CSS之vmin和vmax
tian361zyc的博客
06-11 2707
CSS
CSS3视窗单位vw、vh、vmin、vmax说明
王乐平 技术博客
01-07 1万+
vw、vh做为CSS3中的新单位，已经出来挺久的了，这里也我个人也做一下详细的总结。说明vw、vh、vmin和vmax是CSS3中的新单位，是一种视窗单位，也是相对单位。它们的大小都是由视窗大小来决定的，单位1，代表类似于1%。具体描述如下：vw：视窗宽度的百分比 vh：视窗高度的百分比 vmin：当前较小的vw和vh vmax：当前较大的vw和vh视窗，指的是浏览器可视区域的宽高，也就是wi
vw/vh/px/em/rem/vmin/vmax区别
07-29
例如，如果视口宽度为1000px，那么1vw就等于10px。 vh: 视口高度的百分比单位，1vh等于视口高度的1%。与vw类似，但是基于视口高度计算。 px: 像素单位，是一个固定的长度单位。在不同的设备上，1px可能代表不同的...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值