像 calc() var() 这样的，乍一看还以为是函数呢，其实他们都是属于CSS的，calc()做自适应布局还是很好用的，其实用box-sizing也是可以的，但是calc()强大到，可以用公式做计算，+、-、*、/，如果你在你点电脑打开win+r输入calc回车，你会发现，系统会自动调出计算器来。其实calc()是css3的一个新功能，可以用来做响应式布局，响应式布局宽度是变化的，这样用calc()就可以实现宽度的动态加载。

css calc() 语法

calc()语法非常简单，就像我们小时候学加（+）、减（-）、乘（*）、除（/）一样，使用数学表达式来表示：

.ele {
  width: calc(expression);
}

其中"expression"是一个表达式，用来计算长度的表达式。

calc()的运算规则

calc()使用通用的数学运算规则，但是也提供更智能的功能：

使用“+”、“-”、“*” 和 “/”四则运算；
可以使用百分比、px、em、rem等单位；
可以混合使用各种单位进行计算；
表达式中有“+”和“-”时，其前后必须要有空格，没有空格的写法是错误的；
表达式中有“*”和“/”时，其前后可以没有空格，但建议留有空格。

calc()实战小例子

<style>
    *{
        margin:0;
        padding:0;
    }
    body{
        width:100%;
        background-color: #333;
    }
    div{
        width:100%;
        height:200px;
        padding: 20px;
        background-color: #666;
    }
</style>
<body>
    <div></div>
</body>

此时就会发现div把body的身体挤破了，出现横向滚动条了，解决方法可以用 box-sizing: border-box;要是用calc()就可以这样写

<style>
    *{
        margin:0;
        padding:0;
    }
    body{
        width:100%;
        background-color: #333;
    }
    div{
        `width:calc(100% - 20px * 2);`
        height:200px;
        padding: 20px;
        background-color: #666;
    }
</style>
<body>
    <div></div>
</body>

这样也是可以解决的，calc()做响应式开发是很不错的。

calc()响应式开发例子

做响应式开啊还需要使用到上一章所说道的变量var(),这两个相结合可以很便捷的进行响应式开发，直接上代码吧。

你也可以点击这里然后变化浏览器窗口大小进行预览

<style>
    :root{
        --columns: 3;
    }
    .box{
        width:80%;
        min-width: 300px;
        margin: auto;
        border: 2px solid #333;
        overflow: hidden;
    }
    .calc{
        width: calc(100% / var(--columns) - 10px * 2);
        background: #aaa;
        margin: 10px;
        float: left;
    }
    *{
        margin:0;
        padding:0;
    }
   h5{
       width:100%;
       height:60px;
       text-align: center;
       line-height:60px;
       font-size: 26px;
       color: #fff;
   }
   p{
       padding-top:60px;
       height: 140px;
   }
    img{
        display: block;
        margin: auto;
    }
    @media screen and ( max-width: 992px) {
        :root{
            --columns: 2;
        }
    }
   @media screen and ( max-width: 768px) {
       :root{
           --columns: 1;
       }
   }
</style>
<body style="background: #666">
    <div class="box">
        <div class="calc">
            <h5>子鼠</h5>
            <p><img src="img/shu.png" alt=""></p>
        </div>
        <div class="calc">
            <h5>丑牛</h5>
            <p><img src="img/niu.png" alt=""></p>
        </div>
        <div class="calc">
            <h5>寅虎</h5>
            <p><img src="img/hu.png" alt=""></p>
        </div>
        <div class="calc">
            <h5>卯兔</h5>
            <p><img src="img/tu.png" alt=""></p>
        </div>
        <div class="calc">
            <h5>辰龙</h5>
            <p><img src="img/long.png" alt=""></p>
        </div>
        <div class="calc">
            <h5>巳蛇</h5>
            <p><img src="img/she.png" alt=""></p>
        </div>
        <div class="calc">
            <h5>午马</h5>
            <p><img src="img/ma.png" alt=""></p>
        </div>
        <div class="calc">
            <h5>未羊</h5>
            <p><img src="img/yang.png" alt=""></p>
        </div>
        <div class="calc">
            <h5>申猴</h5>
            <p><img src="img/hou.png" alt=""></p>
        </div>
        <div class="calc">
            <h5>酉鸡</h5>
            <p><img src="img/ji.png" alt=""></p>
        </div>
        <div class="calc">
            <h5>戌狗</h5>
            <p><img src="img/gou.png" alt=""></p>
        </div>
        <div class="calc">
            <h5>亥猪</h5>
            <p><img src="img/zhu.png" alt=""></p>
        </div>
</body>

感觉很厉害，就是变量var()对浏览器的兼容还不是很好，要是决绝了IE那就太厉害了。

calc()兼容性

这个的兼容性还是很好的，不考虑ie8以下的还是可以放心用的，有人说在使用的时候需要加浏览器前缀，像这样的

    .ele {
        /*Firefox*/
        -moz-calc(expression);
        /*chrome safari*/
        -webkit-calc(expression);
        /*Standard */
        calc();
     }

我实际测试了以下，不加前缀也可以用的。

如有错误之处，欢迎指正。