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