fr是css剛出的一個新的單位,目前經過測試在chrome和firefox是可以支持的
舉個案列,拿一個網格布局來說吧
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
* {
margin: 0px;
padding: 0px;
}
.grid {
height: 500px;
width: 500px;
background: #ccc;
margin: 20px auto;
overflow: auto;
display: grid;
grid-template-columns: repeat(4, 25%);
grid-column-gap: 10px;
}
.column {
background: #f66;
}
</style>
</head>
<body>
<div class="grid">
<div class="column">1</div>
<div class="column">2</div>
<div class="column">3</div>
<div class="column">4</div>
</div>
</body>
</html>
看一下效果
這時會發現下面出現了滾動條,如果不是4個網格而是11個網格呢,那計算起來就非常麻煩了,那個網格布局還提供了另一種寫法,就是把算數交給計算機來處理,那就改成這樣
grid-template-columns: repeat(4, calc(100%/4));
這樣還是有滾動條,那就再進一步優化
grid-template-columns: repeat(4, calc((100% - 10px * 3)/ 4));
這樣寫就可以消除滾動條,這只是對於少量的網格布局適用,對於無數個網格怎么辦呢,這時我們的 fr 單位就出場了
我們來看一個復雜的列子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
* {
margin: 0px;
padding: 0px;
}
.grid {
height: 500px;
width: 500px;
background: #ccc;
margin: 20px auto;
overflow: auto;
display: grid;
grid-template-columns: 100px repeat(11, 1fr);
grid-column-gap: 10px;
}
.column {
background: #f66;
}
</style>
</head>
<body>
<div class="grid">
<div class="column">1</div>
<div class="column">2</div>
<div class="column">3</div>
<div class="column">4</div>
<div class="column">5</div>
<div class="column">6</div>
<div class="column">7</div>
<div class="column">8</div>
<div class="column">9</div>
<div class="column">10</div>
<div class="column">11</div>
<div class="column">12</div>
</div>
</body>
</html>
看一下效果
用了fr 這個單位就不用去計算了,瀏覽器會自動去適配,是不是很人性化
