學習如何用CSS變數建立網頁響應佈局 — css var()

w3cbest發表於2019-02-16
CSS變數網頁

在創新的2018年已經過去，在2019年看看如何簡單做成響應性的網站

如果你未曾聽說過CSS變數，那麼我告訴你，它就是CSS的一種新功能，可以讓你擁有在樣式表中使用變數的能力，這樣做時並不需要什麼特別的設定呦。

從本質上講，CSS變數可以讓你擺脫老式的樣式設定：

h1 {
    font-size: 30px;
}
navbar>a {
    font-size: 30px;
}

/ …而是主張這樣寫： /

:root {
    --base-font-size: 30px;
}
h1 {
    font-size: var(--base-font-size);
}
navbar>a {
    font-size: var(--base-font-size);
}

這樣的語法看起來的確有點怪怪的，但有沒有覺得它和less、sass中的變數有點類似呢，但如此一來，只要更改–base-font-size 變數，就能在整個應用中改變字號了。

如果你想把CSS變數學明白，可以在Scrimba網站 這裡有免費互動CSS變數課程，該課程包含8個互動截圖。

今天來講一下如何用CSS變數建立響應佈局

這是一段html

<ul class="item">
    <li>item 1</li>
    <li>item 2</li>
    <li>item 3</li>
    <li>item 4</li>
</ul>

老方法：

在以前即使不使用CSS變數也可以把這些事情搞定。只是需要把要改變的屬性在重新重置一下，需要在媒體查詢中擁有自己的選擇器，但會招致額外的大量程式碼，像下面這樣：

.item {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: space-around;
    padding: 10px;

    li {
        background-color: #ff6f69;
        border: 1px solid #fff;
        font-size: 20px;
        height: 200px;
        list-style-type: none;
        width: 100%;
    }
}

@media (min-width: 768px) {
    .item {
        flex-direction: row;
        li {
            background-color: #ffcc5c;
            font-size: 50px;
            height: 300px;
            width: 50%;
        }
    }
}

@media (min-width: 992px) {
    .item {
        flex-wrap: nowrap;
        li {
            background-color: #ffeead;
            font-size: 100px;
            height: 500px;
            width: calc(100% / 4);
        }
    }
}

檢視效果

新方法

下面讓我們來看如何使用CSS變數來解決這個問題。首先，要把我們將重複利用和更改的數值儲存在變數的內部：

:root {
    --base-color: #ff6f69;
    --base-font-size: 20px;
    --direction: column;
    --width: 100%;
    --height: 200px;
}

然後，在整個頁面中簡單地使用這些變數就行了：

.item {
  display: flex;
  padding: 10px;
  justify-content: space-around;
  flex-direction: var(--direction);
  flex-wrap: var(--wrap);
  li{
    list-style-type: none;
    border: 1px solid #fff;
    height: var(--height);
    width: var(--width);
    background-color: var(--base-color);
    font-size: var(--base-font-size);
  }
}

一旦進行了這樣的設定之後，我們只要在媒體查詢中簡單地更改變數值就行了：

@media (min-width: 768px) {
  :root {
    --base-font-size: 60px;
    --base-color: #ffcc5c;
    --direction: row;
    --height: 300px;
    --width: 50%;
    --wrap:wrap;
  }
}
@media (min-width: 992px) {
  :root {
    --base-font-size: 100px;
    --base-color: #ffeead;
    --direction: row;
    --height: 500px;
    --width: calc(100% / 4);
    --wrap:nowrap;
  }
}

檢視效果

這比我們以往的方法簡便多了。只需盯住 :root，而不必為所有的選擇器指定值了。

這只是一個簡單的例子。設想成熟的網站會是什麼樣子吧，例如，用 –base-margin 來控制APP四周的多數自由空間。想翻轉其值也是很容易的事情，不必用複雜的選擇器來填充媒體查詢了。

總之，CSS變數絕對是提高響應速度時，所代表的未來。

作者： w3cbest前端開發
互動： 如有疑問可進群討論
本文原創，著作權歸作者所有。商業轉載請聯絡@w3cbest前端開發獲得授權，非商業轉載請註明原連結及出處。

相關文章