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">2024-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的代码量少了很多。

上面代码只写了核心部分，大家可以自行根据自己项目需求美化完善。

如果大家有更好的建议可以评论留言，欢迎大家转发。