前端vmin单位记录

最新推荐文章于 2024-05-21 14:21:10 发布
最新推荐文章于 2024-05-21 14:21:10 发布
阅读量264 收藏
点赞数
分类专栏： 前端 文章标签： css 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_40216020/article/details/126583243
版权

前端vmin单位记录：获取当前最小的宽高来作为单位

如：vw单位是在竖屏下的宽，但现在当高小于宽度的时候，用vmin的话自动会把高度来当成vw，也就是谁的小就会拿谁来做当前单位

aizhaiyu
关注
专栏目录
【前端面试课程重点总结】
weixin_44934478的博客
05-22 278
前端知识体系 如何写简历？ HTML&CSS 面试题 CSS面试题 JS 原型和原型链 作用域和闭包 异步和单线程 JS 异步 - 进阶 从JS基础知识到JS Web API ajax 存储 http 面试题 https 关于开发环境 运行环境
Web前端面试题整合，持续更新【可以收藏】
jason的java世界
12-12 1451
css相关、JS相关、浏览器网络相关、vue相关、react相关、移动端相关、插件及工具相关、前端性能优化、原生通信、算法相关、node相关、计算机基础
web前端 ：视窗单位vw/vh、vmin/vmax
汪汪汪汪
02-22 456
由于 vmin 和 vmax 是当前较小的 vw 和 vh 和当前较大的 vw 和 vh。这里就可以用到 vmin 和 vmax。使得文字大小在横竖屏下保持一致。做移动页面开发时，如果使用 vw、wh 设置字体大小（比如 5vw），在竖屏和横屏状态下显示的字体大小是不一样的。
CSS-vmin&vmax单位
若末lan的博客
04-22 406
例如，如果视口宽度为 800px，高度为 1000px，那么 1vmax 等于 10px（1000px 的 1%）。例如，如果视口宽度为 800px，高度为 1000px，那么 1vmin 等于 8px（800px 的 1%）。vmin和vmax是相对于窗口视图来说的，与父级元素等无关，vmin 和 vmax 单位。
开发单位 vmin/vmax
zk_html的博客
11-22 2516
以前，写过一个仿B站移动端的项目；当时，项目适配用的是 vw，而现在B站移动端适配用的是 vmin，想了解 vmin/vmax 单位的作用，还有为什么B站移动端适配要采用 vmin。vw：与视口的宽度有关，1vw 就是视口宽度的 1%vh：与视口的高度有关，1vh 就是视口高度的 1%vmin：与当下视口的宽度和高度的最小值有关，取值为vw和vh中较小的那个vmax：与当下视口的宽度和高度的最大值有关，取值为vw和vh中较大的那个。
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
CSS新单位：vmin和vmax
weixin_53653634的博客
11-07 1580
在响应式网页设计中，我们经常需要根据视口的尺寸来设置元素的大小。vmin和vmax。
前端项目-viewport-units-buggyfill.zip
09-03
是一个专门针对前端开发的项目，其核心目的是确保在旧版的WebKit（如Safari、Chrome的老版本）和Trident（IE浏览器）中，视区单位（viewport units）如 vh (viewport height)、vw (viewport width)、vmin (viewport ...
前端面试题汇总
weixin_42023243的博客
11-10 4004
前端面试题
17条前端面试题总结
xuzhijia1991的博客
02-23 1327
1. margin margin-top为负，元素向上移动 margin-left为负，元素向左移动 margin-right为负，布局单元向左，元素自身不动，后面元素向左。 margin-bottom为负，布局单元上移，自身元素展示不变。下面元素向上。 2. 什么是HTML语义化 html众多的标签中每一种标签都会代表一种单独的意思，比如h1-h6表示标题，ul和ol表示列表，p标签表示段落，strong标签表示强调。a标签表示超链接，img标签表示媒体图片。 每一种标签都有自己的一种意思，html是给计
vw,vh,rem,em,ch,vmax,vmin 单位详解
weixin_41949511的博客
08-06 918
 1. vw  相对于视口的宽度。视口被均分为100单位的vw      1vw = (视口宽度)/100     h1{ font-size: 8vw } 如果视口的宽度是200px，那么上述代码中h1元素的字号将为16px，即(8x200)/100.   2.vh  与vw一样，只不过把宽变成了高   3.vmax  相对于视口的宽度或高度中较大的那个。其中最大的那个被均分为...
前端基础CSS——CSS单位px、em、rem、vh、vw、vmin、vmax
WXY19951125的博客
12-21 362
最近学习文档的过程中，发现了一些陌生的面孔，来学习总结一下。 1、px：相对长度单位。像素单位，相对于显示器屏幕分辨率而言，是一个固定的大小。 2、em：相对长度单位。相对于父级元素的字体大小，如果父元素未设置字体大小，则相对于浏览器的默认字体尺寸。 3、rem：相对长度单位。相对于根元素<html>的字体大小。 vh、vw、vmin、vmax是一种视窗单位，也是相对单位。它相...
网站开发进阶（六十六）CSS3 - 新单位vmin/vmax与旧单位ex/ch使用详解
IT全栈 华强工作室
04-13 2457
前言 vw、vh、vmin、vmax 的含义 （1）vw、vh、vmin、vmax 是一种视窗单位，也是相对单位。它相对的不是父节点或者页面的根节点。而是由视窗（Viewport）大小来决定的，单位 1，代表类似于 1%。 视窗(Viewport)是浏览器实际显示内容区域，换句话说是不包括工具栏和按钮的网页浏览器。 （2）具体描述如下： vw：视窗宽度的百分比（1vw 代表视窗的宽度为 1%） vh：视窗高度的百分比 vmin：当前 vw 和 vh 中较小的一个值 vmax：当前 vw 和 vh 中较大的
web前端长度单位（px、em、rem、%、vw/vh、vmin/vmax、vm、calc()）
最新发布
weixin_57509111的博客
05-21 2034
在前端开发中，会遇到各种不同类型的长度单位，比如px,em,rem等。而整体的长度单位分为两大类：绝对长度单位包括：in,cm, mm, q, pt, pc, px相对长度单位包括：em, rem, %, vw, vh, vmax, vmin, vm, ch, ex。
vmin的简单小用例
CSS 初学者指南
06-27 900
视口单位是10vw（视口宽度的10％）或2vh（视口高度的2％）。 有时有用，因为它们总是相对于视口。 没有父元素的级联或影响。 还有vmin，这是vw和vh中的较小者，而vmax是较大的。 这些值可用于需要长度值的任何值，例如px或em或％或其他值。 让我们看一下使用vmin的微小设计模式。 标头块！ 如果像这样设置<header>的padding ： he...
移动端中的vMin和vMax
LiangRZ
12-02 3560
在以前浏览过的文章当中，我发现了很有用的CSS单位：vw和vh。但与其相关的单位vmin和vmax却远不为人知，且知之甚少。这是非常不幸的，因为在web开发当中，它们拥有一些非常新颖的用例。 正如我之前所讨论过的，1vh等于当前viewport高度（即打开浏览器窗口高度）的1%，而1vw则是当前viewport宽度的1%。vmin和vmax也使用相同的单位，但响应于特定的规则： 1.   vi
vmin、vmax用处
weixin_42835782的博客
12-03 2226
vmin、vmax用处 100vmin指的是屏幕宽和高中较小的那个 100vmax指的是屏幕宽和高中较大的那个 做移动页面开发时，如果使用 vw、wh 设置字体大小（比如 5vw），在竖屏和横屏状态下显示的字体大小是不一样的。 由于 vmin 和 vmax 是当前较小的 vw 和 vh 和当前较大的 vw 和 vh。这里就可以用到 vmin 和 vmax。使得文字大小在横竖屏下保持一致。 ...
CSS3 - 新单位vw、vh、vmin、vmax使用详解（附样例)
qq_43248623的博客
08-27 3564
像 px、em 这样的长度单位大家肯定都很熟悉，前者为绝对单位，后者为相对单位。CSS3 又引入了新单位：vw、vh、vmin、vmax。下面对它们做个详细介绍。 一、基本说明 1，vw、vh、vmin、vmax 的含义      （1）vw、vh、vmin、vmax 是一种视窗单位，也是相对单位。它相对的不是父节点或者页面的根节点。而是由视窗（Viewport）大小来决定的，单位 1，代表类似于 1%。 视窗(Viewport)是你的浏览器实际显示内容的区
vmin 和 vmax的区别
zhaojiaxing123的博客
04-11 1264
vmin 和 vmax的区别
css3新单位vw、vh、vmin、vmax深度解析与应用实例
本文将详细介绍CSS3中的四个新单位vw、vh、vmin和vmax，这些单位是视窗单位，与传统的百分比单位有显著区别。vw表示视窗宽度的1%，vh则是视窗高度的1%，vmin取两者中的最小值，vmax取两者中的最大值。它们与百分比的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

aizhaiyu

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值