前端開發：CSS3的calc() 函數在響應式網站製作中的妙用

先看css3中的calc()的定義

定義與用法
calc() 函數用於動態計算長度值。
需要注意的是，運算符前後都需要保留一個空格，例如：width: calc(100% - 10px)；
任何長度值都可以使用calc()函數進行計算；
calc()函數支持 "+", "-", "*", "/" 運算；
calc()函數使用標準的數學運算優先級規則；

css

下面開始講解，我們網站中經常會有有顯示新聞和日期的這種需求，下面說一個經常使用的場景，如下圖：

html代碼如下：

<ul class="article">
 <li>
 <span class="title">
 <a href="/news/1041.cshtml">標題...............</a>
 </span>
 <span class="date">2019-06-19</span>
 </li>
 .......
</ul>

css代碼如下：

.article li {
 clear: both;
 overflow:hidden;
}
.article li .title {
 float:left;
 width:400px;
}
.article li .date {
 float: right;
 width: 85px;
}

通過代碼我們可以看到，給標題部分加了一個寬度400px，給日期部分加了寬度85px，這段css代碼看起來沒有什麼問題。

某一天領導說，咱們的網站要改成響應式網站，那麼怎麼辦呢？傳統解決辦法是採用寬度百分比+配合媒體查詢

1、先改為百分比，改進後的代碼如下：

.article li {
 clear: both;
 overflow:hidden;
}
.article li .title {
 float:left;
 width:80%;
}
.article li .date {
 float: right;
 width: 20%;
}

這種寫法弊端是，不同屏幕尺寸不一樣，百分比你很難確定標題和日期部分的比例佔多少，在電腦端你確定後了，但是在ipad和手機端就會出現變寬度過大或過小的問題，所以這時候就要對ipad和手機端額外添加一個類似下面的媒體查詢樣式（和bootstrap的柵格系統類似）。

/*手機端*/
@media (max-width: 767px) 
{
.article li .title {
 width:60%;
}
.article li .date {
 width: 40%;
}
}
/*ipad端*/
@media (min-width:768px) {
.article li .title {
 width:70%;
}
.article li .date {
 width: 30%;
}
} 

/*平板電腦端*/
@media (min-width: 992px)
｛
.article li .title {
 width:75%;
}
.article li .date {
 width: 25%;
}
｝

......
/*其他端...*/

這樣寫是不是很x疼？修改和維護起來都特別不方便，這時候就要用到calc() 了，最終改進後的css代碼圖如下：

.article li {
 clear: both;
 overflow:hidden;
}
.article li .title {
 float:left;
 width: calc(100% - 85px);
 overflow: hidden;
 text-overflow: ellipsis;
}
.article li .date {
 width: 85px;
}

日期部分的寬度85px保持不變，那標題部分的寬度就是100%-85px，calc()很方便的解決了這個問題，是不是瞬間感覺css的代碼量少了很多。

上面代碼只寫了核心部分，大家可以自行根據自己項目需求美化完善。

如果大家有更好的建議可以評論留言，歡迎大家轉發。