开发单位 vmin/vmax

最新推荐文章于 2025-10-17 17:01:22 发布
原创 最新推荐文章于 2025-10-17 17:01:22 发布 · 2.7k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#前端 #css3

本文探讨了B站移动端采用vmin单位进行适配的原因。通过对比vw和vmin的特点，阐述了vmin如何更好地适应手机端横竖屏切换，保持屏幕旋转后的尺寸稳定，从而改善用户体验。

摘要

以前，写过一个仿B站移动端的项目；当时，项目适配用的是 vw，而现在B站移动端适配用的是 vmin，想了解 vmin/vmax 单位的作用，还有为什么B站移动端适配要采用 vmin。

vmin/vmax 概述

  • vw：与视口的宽度有关，1vw 就是视口宽度的 1%
  • vh：与视口的高度有关，1vh 就是视口高度的 1%
  • vmin：与当下视口的宽度和高度的最小值有关，取值为 vw 和 vh 中较小的那个
  • vmax：与当下视口的宽度和高度的最大值有关，取值为 vw 和 vh 中较大的那个 

B站移动端适配为什么用 vmin 而不是用 vw ？

vmin 可以照顾移动端（手机端）横屏和竖屏的显示效果，保证移动开发中屏幕 旋转 之后的尺寸不变

  • vw 横屏：显示效果不好

  • vmin 横屏：显示效果好

解锁 CSS 新单位 vmin 和 vmax
weixin_52648900的博客
01-07 1358
简单介绍一下 CSS 的新单位 vmin 和 vmax，相对单位，它们相对于视口的尺寸来定义长度，在响应式设计中非常有帮助。
网站开发进阶（六十六）CSS3 - 新单位vmin vmax与旧单位ex ch使用详解_vmin单位
2401_89308216的博客
12-10 1132
做移动页面开发时，如果使用 设置字体大小（比如 ），在竖屏和横屏状态下显示的字体大小是不一样的。由于 和 是当前较小的 和 和当前较大的 和 。这里就可以用到 和 。使得文字大小在横竖屏下保持一致。在前期博文中，我们讲解了和的相关知识，和总是与视口的高度和宽度有关，与之不同的，和是与这次宽度和高度的最大值或最小值有关，取决于哪个更大和更小。例如，如果浏览器设置为1100px宽、700px高，1vmin会是7px,1vmax为11px。然而，如果宽度设置为800px，高度设置为1080px，1v
vmin、vmax
print_2022的博客
01-02 540
在 CSS 中，vmin和vmax是相对于视口（viewport）尺寸的单位，主要用于响应式设计，可以帮助元素根据视口的大小灵活调整。
移动端适配不再难！一文搞懂 rpx、rem、vw、vmin 等所有单位（附实战建议）
最新发布
jingling555的博客
10-17 1009
移动端适配需要"智能单位"来适应不同屏幕尺寸。常见单位包括：1）px（固定像素）适合边框；2）rpx（小程序专用）自动缩放；3）rem（基于根字体）适合H5项目；4）em（相对父元素）易失控；5）vw/vh（视窗比例）适配精准；6）vmin（取较小比例）更安全。实践建议：小程序用rpx，H5推荐vw/vmin或rem+flexible.js。适配核心是保持页面比例一致，根据项目需求选择最适合的单位方案。
CSS-vmin&vmax单位
若末lan的博客
04-22 685
例如，如果视口宽度为 800px，高度为 1000px，那么 1vmax 等于 10px（1000px 的 1%）。例如，如果视口宽度为 800px，高度为 1000px，那么 1vmin 等于 8px（800px 的 1%）。vmin和vmax是相对于窗口视图来说的，与父级元素等无关，vmin 和 vmax 单位。
vmin 和 vmax的区别
zhaojiaxing123的博客
04-11 1922
vmin 和 vmax的区别
CSS新单位：vmin和vmax
weixin_53653634的博客
11-07 2284
在响应式网页设计中，我们经常需要根据视口的尺寸来设置元素的大小。vmin和vmax。
浅谈css3新单位vw、vh、vmin、vmax的使用详解
09-24
CSS3中的视窗单位vw、vh、vmin和vmax为现代网页设计提供了更灵活的布局方式，尤其在响应式设计中发挥着重要作用。这些单位允许开发者基于浏览器的视窗大小来定义元素的尺寸，而不是依赖于父元素或固定像素值。 1. *...
CSS3单独制作移动端页面布局方式(rem+媒体查询+less布局、vw/vh布局、vmin/vmax布局)
Bulut0907
03-11 1367
CSS的缺点CSS是一门非程序式语言，没有变量、函数、scope作用域等概念。CSS需要书写大量看似没有逻辑的代码，CSS冗余度是比较高的不方便维护及扩展，不利于复用CSS没有很好的计算能力Less的介绍常见的CSS预处理器有：Less、Sass、Stylus。Less(Leaner Style Sheets)是一门CSS扩展语言，它并没有减少CSS的功能，而是在现有的CSS语法上，引入了变量、Mixin(混入)、运算以及函数等功能。为CSS加入程序式语言的特性，大大简化了CSS的编写。
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] 你有使用过vmax和vmin吗？说说你对它们的理解
歌谣的博客
02-06 1776
[css] 你有使用过vmax和vmin吗？说说你对它们的理解 vmax和vmin都是相对于窗口大小的长度单位。 100vmax相当于100%当前窗口长或者宽的长度，取其中最大值，vmin反之。 如果css函数max()和min()普及后，100vmax相当于max(100vw, 100vh) 个人最常用的是vmin，可以在确保在保持宽高比的情况下，不论窗口如何缩放都可以不让元素超出窗口范围。 个人简介 我是歌谣，欢迎和大家一起交流前后端知识。放弃很容易， 但坚持一定很酷。欢
vmin vs vmax_MinMaxing：了解CSS中的vMin和vMax
cungui5726的博客
08-24 616
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 ...
vmin、vmax用处
weixin_42835782的博客
12-03 2374
vmin、vmax用处 100vmin指的是屏幕宽和高中较小的那个 100vmax指的是屏幕宽和高中较大的那个 做移动页面开发时，如果使用 vw、wh 设置字体大小（比如 5vw），在竖屏和横屏状态下显示的字体大小是不一样的。 由于 vmin 和 vmax 是当前较小的 vw 和 vh 和当前较大的 vw 和 vh。这里就可以用到 vmin 和 vmax。使得文字大小在横竖屏下保持一致。 ...
CSS之vmin和vmax
tian361zyc的博客
06-11 2826
CSS
移动端中的vMin和vMax
LiangRZ
12-02 3689
在以前浏览过的文章当中，我发现了很有用的CSS单位：vw和vh。但与其相关的单位vmin和vmax却远不为人知，且知之甚少。这是非常不幸的，因为在web开发当中，它们拥有一些非常新颖的用例。 正如我之前所讨论过的，1vh等于当前viewport高度（即打开浏览器窗口高度）的1%，而1vw则是当前viewport宽度的1%。vmin和vmax也使用相同的单位，但响应于特定的规则： 1.   vi
css的单位：vmin和vmax
2301_77007887的博客
04-20 476
页面中有一张图片，位置居中，宽高单位设置为vmin；改变窗口的大小，图片始终在页面中居中。vmax：与当前视口的高度和宽度有关，取值为 vw 和。vw：与视口的宽度有关，1vw 就是视口宽度的 1%vh：与视口的高度有关，1vh 就是视口高度的 1%vw，vh，vmin，vmax都可以用来做适配。vmin：与当前视口的高度和宽度有关，取值为。
前端vmin单位记录
wolfman的博客
08-29 316
如：vw单位是在竖屏下的宽，但现在当高小于宽度的时候，用vmin的话自动会把高度来当成vw，也就是谁的小就会拿谁来做当前单位。前端vmin单位记录：获取当前最小的宽高来作为单位。
CSS单位vmin、vmax
a_strong_pig的博客
12-06 331
css单位 vmin和vmax
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
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值