CSS3 vmax

admin發表於2018-12-16

vmax的值是當前vw和vh中較大的值,也就是相對於當前視口寬度和高度較大的那一個。

1vmax是較大寬度或者高度值的百分一。

程式碼如下:

[CSS] 純文字檢視 複製程式碼
div{
  height:50vmax;
}

如果當前視口寬度500px,高度200px,那麼以視口寬度為參考,於是1vmin=5px,50vmin=250px。

瀏覽器支援:

(1).IE瀏覽器不支援此單位。

(2).edge瀏覽器支援此單位。

(3).谷歌瀏覽器支援此單位。

(4).opera瀏覽器支援此單位。

(5).火狐瀏覽器支援此單位。

(6).safria瀏覽器支援此單位。

(7).iOS Safari8.0+支援此單位。

(8).Android Browser4.4+支援此單位。

(9).Android Chrome26.0+支援此單位。

程式碼例項:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style>
* {
  margin:0px;
  padding:0px;
}
div{
  width: 50vmax;
  height:100px;
  background-color:blue;
}
</style>
</head>
<body>
  <div></div>
</body>
</html>

div元素的具體寬度值,要根據當前視口的長寬大小而定。