CSS3中calc()做響應模式布局方法介紹

這篇文章主要介紹了 CSS3的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)