欢迎来到计算机相关教程网!

CSS

当前位置: 主页 > 网页制作 > CSS

css中,vmin和vmax的用法。

时间:2022-10-05 11:42:19|栏目:CSS|点击:

vmin和vmax详解

vmin:表示选择视窗最小的那一个;

vmax:选择视窗最大的那一个;

和vw与vh一样支持calc的各种单位和运算符

css中,vmin和vmax的用法。(图1)

如上图所示,div {height:100vmin;width:100vmin;},宽和高均选择最小的那一个视窗,可以看到这是一个以手机屏幕的宽(最小)来设定div的宽高。


同样的道理,如果需要选择最大的那一个视窗作为宽或高,那么就使用vmax即可,如下图所示。

css中,vmin和vmax的用法。(图2)

代码为div {height:100vmax;width:100vmax;},选择设备视窗最大的那一个作为我们的宽或高,也支持calc运算。


使用vmin或vmax的好处是可以对各种不同屏幕设置相对宽高,这对于视觉效果很好,而且不会导致排版混乱,减少很多@media判断屏幕宽度的代码。例如下面的代码


lytit{max-width: calc(100vw / 3) !important;max-height: calc(100vw / 3) !important;}


这个是我的一张图片响应式代码,最大宽度和高度都设置为视窗宽度的三分之一,对于从手机屏幕320到768px的屏幕上显示很良好。


上一篇:css3中的animation和transition的不同点是?

栏    目:CSS

下一篇:transform-origin详解

本文标题:css中,vmin和vmax的用法。

本文地址:http://www.wangzhanteacher.com/?m=home&c=View&a=index&aid=251

广告投放 | 联系我们 | 版权申明

重要申明:本站所有的文章、图片、评论等,均由网友发表或上传并维护或收集自网络,属个人行为,与本站立场无关。

如果侵犯了您的权利,请与我们联系,我们将在24小时内进行处理、任何非本站因素导致的法律后果,本站均不负任何责任。

联系QQ:8044517 | 邮箱:8044517@qq.com

Copyright © 2022-2025 计算机相关教程网 版权所有冀ICP备17010187号