CSS3的calc()做响应模式布局的实现方法

CSS3的calc()函数可以非常方便地实现响应式布局。

什么是calc()函数

calc()函数是CSS3新增的一个函数，允许我们在样式中动态计算数值。它可以将基本的数学运算符（加、减、乘、除）与长度、百分比、视窗宽高等多种单位结合使用。

calc()的语法

calc()函数的语法如下：

width: calc(expression);

其中，expression是指要计算的表达式。可以使用+、-、*和/等运算符及各种单位进行运算。

例如：

width: calc(100% - 20px);

在此示例中，calc()函数会计算出100%减去20px的结果。

使用calc()实现响应式布局

1. 实现两栏布局

以下是一个简单的两栏布局示例：

<div class="container">
  <div class="left">左栏</div>
  <div class="right">右栏</div>
</div>

.container {
  width: 960px;
  margin: 0 auto;
}

.left {
  float: left;
  width: 300px;
}

.right {
  float: right;
  width: 660px;
}

如果要实现响应式布局，即在窗口缩小到一定宽度时左侧栏目自适应宽度，可以使用calc()函数实现。

.left {
  float: left;
  width: calc(100% - 660px);
}

.right {
  float: right;
  width: 660px;
}

在上面代码中，左栏的宽度被设置为窗口宽度减去右栏宽度的结果，从而保证左右两侧总宽度恰好为100%。

2. 实现响应式排版

以下是一个响应式排版的示例：

<div class="container">
  <div class="item">项目1</div>
  <div class="item">项目2</div>
  <div class="item">项目3</div>
</div>

.container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.item {
  width: calc(33.333333% - 10px);
  margin-bottom: 20px;
}

在上面代码中，使用flexbox布局实现项目的排列，同时通过calc()函数计算每个项目的宽度，从而能够自适应窗口大小的变化。

总结

calc()函数是CSS3提供的一种非常便利的数学计算工具。利用calc()函数，我们可以轻松实现响应式布局和排版。