css3 響應(yīng)式神器 calc()

Aldous 發(fā)布于2019-08-30 12:51 / 3318人閱讀

摘要：背景大家經(jīng)常為遇到類似卡片的設(shè)計稿，如果卡片與卡片之間沒有距離，如那寫是沒有什么問題的那如果是以下這種情況呢圖片與圖片之間的距離是，那響應(yīng)式處理起來難免麻煩。但是這些方法難免會讓寶寶心里崩潰。

背景：

大家經(jīng)常為遇到類似卡片的設(shè)計稿，如果卡片與卡片之間沒有距離，如

那寫 width: 33.33%是沒有什么問題的

那如果是以下這種情況呢

圖片與圖片之間的距離是 20px，那響應(yīng)式處理起來難免麻煩。雖然可以通過 js 計算寬度解決，或者修改布局使用 box-sizing 解決。但是這些方法難免會讓寶寶心里崩潰/(ㄒoㄒ)/~~。接下來開始介紹 calc()

是什么

css3 新增的一個函數(shù)取值，用于動態(tài)計算長度值，參數(shù)可以是百分比、em、px和rem單位值，如width: calc(100% - 22px)。
如上面的例子，可以這樣解決 width: calc((100% - 40px)/3)。是不是酷酷噠~~

語法

calc()函數(shù)支持 +, -, *, / 運算，可以單一單位或者混合單位使用。

.div {
  width: calc(80% - 10px);
}

注意:

+ , - 號前后需要使用空格隔開，不可寫成 calc(100px-2px)

* , / 號前后可不需要空格隔開

兼容性

兼容性前綴：

.div {
  width: calc(80% - 10px);
  /*Firefox*/
  width: -moz-calc(80% - 10px);   
  /*chrome safari*/
  width: -webkit-calc(80% - 10px); 
}

在 less 如何使用

需要在參數(shù)外面加上: ~("expression")，如：

 .div {
  width: calc(~"100% - 80px");
}

最后

類似的 css3 函數(shù)還有:

min()：min(10% + 20px, 300px) // 用于比較數(shù)值的大小并取出最小的那個
max()：max(10% + 20px, 150px) // 用于比較數(shù)值的大小并取出最大的那個
cycle(): //允許子孫元素使用取值序列中的值循環(huán)替換繼承而來的值

但是但是但是目前這三種函數(shù)還沒有瀏覽器支持/(ㄒoㄒ)/~~，讓我們一起等待這牛逼函數(shù)得到支持~ ~

云服務(wù)器 GPU云服務(wù)器響應(yīng)式響應(yīng)式布局響應(yīng)式網(wǎng)站響應(yīng)式設(shè)計

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/115120.html

相關(guān)文章

CSS5:移動端頁面(響應(yīng)式)

摘要：接下來做端一般都寫手機最大也就先隱藏手機菜單和按鈕優(yōu)先級問題解決方法直接使用用谷歌開發(fā)者工具查看優(yōu)先級里面的垂直居中再把寫成布局只要改成里面的子項目就變成一行了菜單導(dǎo)航導(dǎo)航導(dǎo)航導(dǎo)航導(dǎo)航到航導(dǎo)航導(dǎo)航導(dǎo)航導(dǎo)航方法切換元素的可見狀態(tài)。 CSS5:移動端頁面(響應(yīng)式) 如果手機端和PC端頁面差別很大,就不要寫響應(yīng)式,不要寫@media 就直接將兩個頁面拆開成兩個文件就可以了.關(guān)于判斷是手機端你...

superPershing 2019-08-30 15:53 評論0 收藏0
css中的幾個單位——rem，視口單位和ch

摘要：基于視口的單位視口單位可以用來什么，比如實現(xiàn)響應(yīng)式設(shè)置相對視口的寬度和高度，可以實現(xiàn)水平垂直居中實現(xiàn)網(wǎng)格布局將圖片按照屏幕的比例顯示這幾個單位是相對于視口的，也就是可視區(qū)域，總共分成了份。 rem rem是設(shè)計響應(yīng)式網(wǎng)頁的神器，因為rem單位是相對HTML元素的font-size屬性的，因此當使用rem作為屬性單位時，當改變HTML元素的font-size，其他使用rem作為單位的元素...

leiyi 2019-08-29 15:34 評論0 收藏0
css中的幾個單位——rem，視口單位和ch

摘要：基于視口的單位視口單位可以用來什么，比如實現(xiàn)響應(yīng)式設(shè)置相對視口的寬度和高度，可以實現(xiàn)水平垂直居中實現(xiàn)網(wǎng)格布局將圖片按照屏幕的比例顯示這幾個單位是相對于視口的，也就是可視區(qū)域，總共分成了份。 rem rem是設(shè)計響應(yīng)式網(wǎng)頁的神器，因為rem單位是相對HTML元素的font-size屬性的，因此當使用rem作為屬性單位時，當改變HTML元素的font-size，其他使用rem作為單位的元素...

weij 2019-08-26 11:56 評論0 收藏0
視口相關(guān)單位的應(yīng)用 —— 別說你懂CSS相對單位

摘要：還有視口相關(guān)單位，依賴瀏覽器的視口大小來定義長度的。如果你不熟悉視口相關(guān)單位的話，在這里簡單介紹一下。筆記視口相關(guān)單位對于大多數(shù)瀏覽器還是一項比較新的特性，所以當你試圖把這個特性和其他樣式混搭時，有可能會有一些很奇怪的。前段時間試譯了Keith J.Grant的CSS好書《CSS in Depth》，其中的第二章《Working with relative units》，書中對rel...

lbool 2019-08-29 16:06 評論0 收藏0
HTML-CSS

摘要：但是，從字體上來說雪碧圖制作，使用以及相關(guān)，圖文。由于采用了編譯，所以能夠保證在瀏覽器不支持標準布局的情況下，回滾到舊版本的，保證移動設(shè)備中能呈現(xiàn)出一樣的布局效果。我不想陷入和的紛爭，但是有一件事是確定的極大的提升了移動端一勞永逸的搞定 flex 布局尋根溯源話布局一切都始于這樣一個問題：怎樣通過 CSS 簡單而優(yōu)雅的實現(xiàn)水平、垂直同時居中。記得剛開始學(xué)習(xí) CSS 的時候，看到 ...

xiaokai 2019-08-01 18:21 評論0 收藏0