用calc()实现响应式布局

这次给大家带来用calc()实现响应式布局，用calc()实现响应式布局的注意事项有哪些，下面就是实战案例，一起来看一下。

REM方法

calc()从字面我们可以把他理解为一个函数function。其实calc是英文单词calculate(计算)的缩写，是css3的一个新增的功能，用来指定元素的长度。比如说，你可以使用calc()给元素的border、margin、pading、font-size和width等属性设置动态值。为何说是动态值呢?因为我们使用的表达式来得到的值。不过calc()最大的好处就是用在流体布局上，可以通过calc()计算得到元素的宽度。

calc()能让你给元素的做计算，你可以给一个p元素，使用百分比、em、px和rem单位值计算出其宽度或者高度，比如说“width:calc(50% + xxpx)”，这样一来你就不用考虑元素p的宽度值到底是多少，而把这个烦人的任务交由浏览器去计算。

width:calc(50% + xxpx)

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

css3的pointer-events使用详解

完全利用CSS实现元素居中

CSS3做出无缝轮播广告

以上就是用calc()实现响应式布局的详细内容，更多请关注php中文网其它相关文章！