CSS3的calc()使用问题探讨

calc()这个属性我也是最近才关注,初看这个属性会有疑惑,不太会相信calc()是css中的部分,因为看起来像是函数。这个属性适用自适应布局,这方面也有其他的属性box-sizing,flex

今天花了一天的时间研究了下这个,下面说说我的一些想法。

calc()从字面我们可以把他理解为一个函数function。其实calc是英文单词calculate(计算)的缩写,用来指定元素的长度。比如说,你可以使用calc()给元素的border、margin、pading、font-size和width等属性设置动态值。为何说是动态值呢?因为我们使用的表达式来得到的值。不过calc()最大的好处就是用在流体布局上,可以通过calc()计算得到元素的宽度,这样一来你就不用考虑元素DIV的宽度值到底是多少,而是由浏览器自己去计算。

看下面这个例子:

<section>
  <img src="http://placekitten.com/404/303">
  <img src="http://placekitten.com/404/303">
  <img src="http://placekitten.com/404/303">
  <img src="http://placekitten.com/404/303">
  <img src="http://placekitten.com/404/303">
  <img src="http://placekitten.com/404/303">
  <img src="http://placekitten.com/404/303">
</section>

我们来加上这个样式:

img {
  float: left;
  width: calc(25% - 20px);
  margin: 10px;
}

这里每张图片都正好是25%,变成一行4个排列,再从其宽度中减去20px,左右各10px间隔,可以运行下面这段代码看下效果

提示:你可以先修改部分代码再运行。

我们还可以使用媒体查询来改变窗口宽度,对自适应来说很有帮助

img {
  float: left;
  margin: 10px;
  width: calc(100% * 1 / 4 - 20px);
}
@media (max-width: 900px) {
  img {
    width: calc(100% * 1 / 3 - 20px);
  }
}
@media (max-width: 600px) {
  img {
    width: calc(100% * 1 / 2 - 20px);
  }
}
@media (max-width: 400px) {
  img {
    width: calc(100% - 20px);
  }
}

这个在各个浏览器中都得到了很好的兼容,就是安卓里支持不好。
caniuse

You may also like...

发表评论

电子邮件地址不会被公开。 必填项已用*标注