响应式布局html像素值计算,CSS Calc()：制作响应式网格布局的锋利武器
響應(yīng)式的布局方式是當(dāng)下最為流行網(wǎng)頁布局。對于一個響應(yīng)式的網(wǎng)格系統(tǒng)，可以有多種的解決方案。在這篇文章中，我們將和大家分享使用CSS calc()函數(shù)來制作響應(yīng)式網(wǎng)格的一些知識。
With calc(), you can perform calculations to determine CSS property values.-MDN
CSS calc()函數(shù)可以和、、、、或一起使用，它可以執(zhí)行+、-、*和/等數(shù)學(xué)運(yùn)算，并將計算結(jié)果和前面提到的測量單位組合為一個新的CSS屬性值。
calc()對于計算相對值特別有用，例如相對寬度和相對高度。舉例來說，要使用calc()來設(shè)置一個元素的寬度，使該元素是它的父元素寬度的100% - 50% / 3寬，可以這樣寫CSS規(guī)則：
.el {
width: calc(100% - 50% / 3);
}
下面的CSS規(guī)則表示一個元素的左邊距是它的寬度的10%加上10像素。
.el {
margin-left: calc(10% + 10px);
}
calc()表達(dá)式代表一個數(shù)學(xué)計算的結(jié)果，它使用標(biāo)準(zhǔn)的優(yōu)先級規(guī)則。表達(dá)式會從左向右進(jìn)行計算，乘除優(yōu)先于加減，如果帶有括號的將優(yōu)先計算。下面是calc()表達(dá)式的一些注意事項：
+和-操作符的兩邊都需要帶上空格符(*和/操作符不需要)。例如：calc(50% -10px)是無效的，因?yàn)樗鼤徽J(rèn)為是一個百分比數(shù)后面跟著一個負(fù)數(shù)，而不是一個表達(dá)式。
calc()可以由字面值、attr()或calc()(可以嵌套calc()函數(shù))或組成。
不同單位類型的的值不能再同一個calc()表達(dá)式中使用。例如calc(5px - 5px + 10s)或calc(0 * 5px + 10s)都是錯誤的，因?yàn)楸磉_(dá)式中使用一個長度單位和一個時間單位相加。
calc()的語法
= calc( )
= [ [ '+' | '-' ] ]*
= [ '*' | '/' ]*
= | | | ( )
是一個帶單位的數(shù)字。它用于指定距離()、持續(xù)時間()、頻率()、分辨率()和其它一些標(biāo)量。
應(yīng)用舉例
下面是一個在容器中放置7張圖片的小例子：
CSS代碼如下：
img {
float: left;
width: calc(25% - 20px);
margin: 10px;
}
上面的代碼使每一張圖片的寬度都被設(shè)置為它的父元素寬度的25%減去20px。減去20像素是為了在各張圖片之間留下一些間隙。每張圖片都帶有10像素的margin值。
更復(fù)雜的響應(yīng)式設(shè)計方案
我們可以使用另一種不同的寫法來的到和上面相同的結(jié)果。
width: calc(100% * 1/4 - 20px);
CSS代碼如下：
img {
float: left;
margin: 10px;
width: calc(100% * 1 / 4 - 20px);
}
@media (max-width: 900px) {
img {
width: calc(100% * 1 / 3 - 20px);
}
}
@media (max-width: 600px) {
img {
width: calc(100% * 1 / 2 - 20px);
}
}
@media (max-width: 400px) {
img {
width: calc(100% - 20px);
}
}
我們還可以使用媒體查詢來為不同屏幕分辨率設(shè)置每行不同的圖片數(shù)量。
縮放你的瀏覽器來看看上面兩種不同寫法的結(jié)果，以及使用媒體查詢后的顯示結(jié)果。
更多的例子
由于calc()函數(shù)可以使用任何的長度單位，下面的使用方法都是正確的。
設(shè)置一個段落的margin值：
p {
margin: calc(1rem - 2px) calc(1rem - 1px);
}
下面的表達(dá)式會在漸變上放置一個距離兩端距離都相等的color-stops：
.foo {
background-image: linear-gradient(to right, silver,
white 50px,
white calc(100% - 50px),
silver);
}
下面的表達(dá)式會將視口中的字體大小設(shè)置為“40em”，確保不論屏幕大小如何變化，相等數(shù)量的文字總是會填滿整個屏幕視口。
:root {
font-size: calc(100vw / 40);
}
下面的表達(dá)式設(shè)置一個元素相對于屏幕視口的行高：
h1 {
font: 3em / calc(100vh - 1em) "Lora", sans-serif;
}
calc()與百分比值結(jié)合，可以創(chuàng)建強(qiáng)大的網(wǎng)格系統(tǒng)。它可以非常容易的計算出寬度、margins和paddings等值。例如，制作一個6列的網(wǎng)格系統(tǒng)，可以使用下面的表達(dá)式：
.col-1-6 { /* 1/6的寬度 */
width: 16.66%
}
.col-5-6 { /* 5/6的寬度 */
width: 83.333%;
}
上面的代碼是非常直觀的，一眼就可以看出這個網(wǎng)格系統(tǒng)有多少列。使用calc()可以將上面的代碼替換為：
.col-1-6 {
width: calc(100% / 6);
}
.col-5-6 {
width: calc(100% / 6 * 5);
}
瀏覽器支持
IE9在使用display:table時會忽略calc()。更可怕的是在IE9的background-position屬性中使用calc()會照成瀏覽器的崩潰。
小結(jié)
calc()函數(shù)可以用于計算一個表達(dá)式值，使用表達(dá)式的結(jié)果來為元素設(shè)置值。在響應(yīng)式設(shè)計中，calc()函數(shù)是一把鋒利的武器，它可以使我們快速的制作各種響應(yīng)式的網(wǎng)格系統(tǒng)。如果你還不了解calc()函數(shù)，從現(xiàn)在起就開始認(rèn)真的研究它吧！
總結(jié)
以上是生活随笔為你收集整理的响应式布局html像素值计算,CSS Calc()：制作响应式网格布局的锋利武器的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 鸿蒙自研系统,华为已注册“华为鸿蒙”商标
- 下一篇： DIV层+CSS实现锁屏