用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中文網其他相關文章！