css vmin和vmax有什么用？
网友回复
在CSS中，vmin和vmax是视口单位，它们可以用来设置元素的尺寸或间距。vmin表示视口的最小尺寸，它等于视口宽度和高度中较小的那个值。
vmax表示视口的最大尺寸，它等于视口宽度和高度中较大的那个值。
使用vmin和vmax可以使元素根据视口的大小动态调整大小，从而实现响应式设计。例如，下面的CSS代码将一个元素的宽度设置为视口宽度和高度中较小的那个值的50%：width: 50vmin;
这意味着当视口变小时，元素的宽度也会相应地缩小，以适应较小的屏幕。同样地，如果您想要一个元素的高度等于视口宽度和高度中较大的那个值的80%，可以使用以下代码：height: 80vmax;
这将使元素的高度在大屏幕上更大，在小屏幕上更小。
<!DOCTYPE html>
<html>
<head>
<title>使用vmin和vmax设置图片大小的示例</title>
<style>
*{
margin: 0;
padding: 0;
}
body {
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background:#fff;
}
img {/* vmin: 取视口最短边 */
/* vmax: 取视口最长边*/
width:90vmin;
}
</style>
</head>
<body>
<img src="//repo.bfw.wiki/bfwrepo/image/5e62ef20b92ee.png" alt="示例图片">
</body>
</html>by thinkfuture
我知道答案，我要回答
私活外包
最新提问
