先看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的代碼量少了很多。
上面代碼只寫了核心部分，大家可以自行根據自己項目需求美化完善。
如果大家有更好的建議可以評論留言，歡迎大家轉發。
