大家經常為遇到類似卡片的設計稿，如果卡片與卡片之間沒有距離，如
那寫width: 33.33%是沒有什麼問題的
那如果是以下這種情況呢
與之間的距離是 20px，那響應式處理起來難免麻煩。雖然可以通過 js 計算寬度解決，或者修改布局使用 box-sizing 解決。但是這些方法難免會讓寶寶心裡奔潰/(ㄒoㄒ)/~~。接下來開始介紹 calc()
css3 新增的乙個函式取值，用於動態計算長度值，引數可以是百分比、em、px和rem單位值，如width: calc(100% - 22px)。如上面的例子，可以這樣解決width: calc((100% - 40px)/3)。是不是酷酷噠~~
calc()函式支援+, -, *, /運算，可以單一單位 或者 混合單位使用。
.div
注意:
+ , -號前後需要使用空格隔開，不可寫成calc(100px-2px)* , /號前後可不需要空格隔開
相容性字首：
.div
.div
min()：min(10% + 20px, 300px) // 用於比較數值的大小並取出最小的那個
max()：max(10% + 20px, 150px) // 用於比較數值的大小並取出最大的那個
cycle(): //允許子孫元素使用取值序列中的值迴圈替換繼承而來的值
但是目前這三種函式還沒有瀏覽器支援，所以，讓我們一起期待。。。
css3響應式設計
說明 手機瀏覽器是把頁面放在乙個虛擬的 視窗 viewport 中 width 設定layout viewport 的寬度，為乙個正整數，或字串 width device initial scale 設定頁面的初始縮放值，為乙個數字，可以帶小數 minimum scale 允許使用者的最小縮放值，為...
css3 響應式設計
多列 column count 設定列的個數，可以把一行文字分割成設定的列的個數。如果設定了列的寬度，當列的最小寬度和不夠總寬度的時候，列的數量就會縮小 column width 可以設定列的最小寬度 column span 可以設定列的橫跨數量 常用於設定標題，值為1或者all column ru...
css3響應式布局
1 分界點 超小螢幕xs 移動裝置 768px以下 小屏裝置sm 768px 992px 中等螢幕md 992px 1200px 寬屏裝置lg 1200px以上 2 語法 media screen and max width 768px stylesheet href css a.css style...