CSS之vmin和vmax

最新推荐文章于 2024-05-10 01:10:16 发布
最新推荐文章于 2024-05-10 01:10:16 发布
阅读量2.6k 收藏 6
点赞数
分类专栏： css

vh和vm总是与视口的高度和宽度有关，与之不同的，vmin和vmax是与当下屏幕的宽度和高度的最大值或最小值有关，取决于哪个更大和更小

例如，如果浏览器设置为1100px宽、700px高，1vmin会是较小的7px，而1vmax将是较大的11px。然而，如果宽度设置为800px，高度设置为1080px，1vmin将会是较小的8px，而1vmax将会是较大的10.8px

实例1：设想你需要一个总是在屏幕上可见的元素

这里写图片描述

这里写图片描述

实例2：如果你需要一个总是覆盖可视窗口的正方形(一直接触屏幕的四条边),使用相同的规则只是把单位换成vmax

这里写图片描述

这里写图片描述

tian361zyc
关注
  • 0
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS新单位：vmin和vmax
weixin_53653634的博客
11-07 1085
在响应式网页设计中，我们经常需要根据视口的尺寸来设置元素的大小。vmin和vmax。
css常用单位总结: px / em / rem / vw / vh / vmax / vmin
黑木令之佛性
06-17 5181
css 的单位: px / em / rem / vw / vh / vmax / vmin (7个) px: 1. px 是固定的像素, 一旦设置了就无法因为页面大小而改变 em: 1. em 是描述相对于, 应用在当前元素的字体尺寸, 所以它也是相对长度单位 。 一般浏览器字体大小默认为 16px, 则 2em == 32px; 2. 子元素字体大小的 em 是相对于父元素字体大小 3. 元素的 width/height/padding/margin 用 em 的话, 是相对于该元素的..
网站开发进阶（六十六）CSS3 - 新单位vmin vmax与旧单位ex ch使用详解_vmin单位(1)
最新发布
2401_84412953的博客
05-10 245
例如，如果浏览器设置为1100px宽、700px高，1vmin会是7px,1vmax为11px。然而，如果宽度设置为800px，高度设置为1080px，1vmin将会等于8px而1vmax将会是10.8px。如果你需要一个总是覆盖可视窗口的正方形(一直接触屏幕的四条边),使用相同的规则只是把单位换成。这些规则的组合提供了一个非常灵活的方式，用新的、令人兴奋的方式利用可视窗口的大小。使用高度和宽度设置为低于100的。），在竖屏和横屏状态下显示的字体大小是不一样的。总是与视口的高度和宽度有关，与之不同的，
vw vh
qq_40774743的博客
08-23 407
1，vw、vh、vmin、vmax 的含义 （1）vw、vh、vmin、vmax 是一种视窗单位，也是相对单位。它相对的不是父节点或者页面的根节点。而是由视窗（Viewport）大小来决定的，单位 1，代表类似于 1%。 视窗(Viewport)是你的浏览器实际显示内容的区域—，换句话说是你的不包括工具栏和按钮的网页浏览器。   （2）具体描述如下： vw：视窗宽度的百分比（1vw 代表...
CSS3 - 新单位vw、vh、vmin、vmax使用详解（附样例)
qq_43248623的博客
08-27 3312
像 px、em 这样的长度单位大家肯定都很熟悉，前者为绝对单位，后者为相对单位。CSS3 又引入了新单位：vw、vh、vmin、vmax。下面对它们做个详细介绍。 一、基本说明 1，vw、vh、vmin、vmax 的含义      （1）vw、vh、vmin、vmax 是一种视窗单位，也是相对单位。它相对的不是父节点或者页面的根节点。而是由视窗（Viewport）大小来决定的，单位 1，代表类似于 1%。 视窗(Viewport)是你的浏览器实际显示内容的区
CSS查缺补漏之《常用长度单位(px、em、rem、%、vw/vh、vmin/vmax)》
一只努力搬砖的打工妹纸
06-15 1178
本文对常用的几种CSS单位进行详细举例介绍~
浅谈css3新单位vw、vh、vmin、vmax的使用详解
09-24
CSS3中的视窗单位vw、vh、vmin和vmax为现代网页设计提供了更灵活的布局方式，尤其在响应式设计中发挥着重要作用。这些单位允许开发者基于浏览器的视窗大小来定义元素的尺寸，而不是依赖于父元素或固定像素值。 1. *...
css3中单位px,em,rem,vh,vw,vmin,vmax的区别及浏览器支持情况
09-24
主要介绍了css3中单位px,em,rem,vh,vw,vmin,vmax的区别及浏览器支持情况的相关资料,需要的朋友可以参考下
ViewportPolyfill:在CSS中为所有视口单位添加Polyfill！ VH，VW，VMIN，VMAX
05-22
VH，VW，VMIN，VMAX。 如何使用它 克隆或下载此仓库 阅读viewportPolyfill.js内部的说明（我保证，这很容易！） 运行节点viewportPolyfill.js 这个怎么运作 当您运行节点viewPolyfill.js时，它将读取您的目标css...
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 ; ...
css3新单位vw、vh、vmin、vmax的使用详解（附样例）
JoeBlackZQQ的专栏
08-23 2268
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 是一种视窗单位...
20、CSS中单位：【px和%】【em和rem】【vw|vh|vmin|vmax】的区别
天界程序员的博客
02-09 1004
css中px、%| em 、rem | vw、vh、vmin、vmax的区别
说说em/px/rem/vh/vw的区别
树上骑个猴的博客
03-31 2599
一、介绍 传统的项目开发中，我们只会用到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的使用介绍
qq_47443027的博客
08-03 3590
有时为了突出弹出框，或者避免页面元素被点击。我们需要一个覆盖整个可视区域的半透明遮罩，这个使用。)是你的浏览器实际显示内容的区域—，换句话说是你的不包括工具栏和按钮的网页浏览器。是一种视窗单位，也是相对单位。它相对的不是父节点或者页面的根节点。高度的情况下，是无法正确获得可视区域的高度的，所以这是挺不错的优势。）单位除了可以用来设置元素的宽高尺寸，也可以在文本中使用。），在竖屏和横屏状态下显示的字体大小是不一样的。是相对于父元素的大小设定的比率，）大小来决定的，单位。：视窗宽度的百分比（...
[css] 你有使用过vmax和vmin吗？说说你对它们的理解
歌谣的博客
02-06 1538
[css] 你有使用过vmax和vmin吗？说说你对它们的理解 vmax和vmin都是相对于窗口大小的长度单位。 100vmax相当于100%当前窗口长或者宽的长度，取其中最大值，vmin反之。 如果css函数max()和min()普及后，100vmax相当于max(100vw, 100vh) 个人最常用的是vmin，可以在确保在保持宽高比的情况下，不论窗口如何缩放都可以不让元素超出窗口范围。 个人简介 我是歌谣，欢迎和大家一起交流前后端知识。放弃很容易， 但坚持一定很酷。欢
vw/vh/vmin/vmax/em/rem/%/px的区别
weixin_44709363的博客
05-30 106
vmin/vmax：取视窗宽和高的最小值作为基准/取视窗宽和高的最大值作为基准 1vmin=1080px/100=10.8px 1vmax=1920px/100=19.2px。vw/vh:相对于视窗的宽和高 1vw=视口宽/100 1vh=视口高/100。rem：相对根元素的大小。
搞清楚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
html转换vmax,CSS里px、em、rem、%、vw、vh、vmin、vmax这些单位的区别
weixin_36314117的博客
06-04 465
不要删除CSS中常见的单位px：最常见的，页面按照精准样式展示，属于绝对单位em：基准点为父节点字体的大小，如果自身定义了font-size按自身来计算；也就是说这个em不是一个固定值，属于相对单位rem：相对单位，r可以看作为 ”root“，结合em，理解为相对根节点HTML的字体大小来计算vw：viewpoint width，视窗宽度，1vw等于视窗宽度的1%vh：viewpoint heig...
css中vmax和vmin
03-31
vmax和vmin是CSS3中的相对长度单位，它们分别表示视口的最大值和最小值。 vmax：表示视口的最大值，是vw和vh中较大的那个值。例如，如果视口宽度为500px，高度为800px，则vmax为800px。 vmin：表示视口的最小值，...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值