[翻譯]CSS變數讓你輕鬆製作響應式網頁

白吟靈發表於2018-03-04
CSS變數網頁

原文地址：https://medium.freecodecamp.org/how-to-make-responsiveness-super-simple-with-css-variables-8c90ebf80d7f
作者：Per Harald Borgen
摘要：這是一篇2018年製作響應性網頁的快速教程。

響應式佈局
如果你之前沒有聽說過CSS變數，那麼現在我將告訴你：它是CSS的新特性，讓你能夠在樣式表中使用變數的能力，並且無需任何配置。

實際上，CSS變數能夠讓你改變以往設定樣式的老方法：

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

而使用了CSS變數之後：

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

這樣的詞法有點奇怪，但它確實能夠讓你通過僅改變--base-font-size的值來改變app中所有原生的字型大小。

如果你想要學習CSS變數的知識，可以登入Scrimba看我的視訊課程，或是閱讀我在Medium上寫的文章：如何學習CSS變數。

好了，現在讓我們看看如何使用這個新知識來更加簡單地製作響應式站點吧。

初始配置

讓我們來把下面這個頁面變成響應式的吧：
頁面

這個頁面在PC端看上去很不錯，不過你可以看到它在移動端的表現並不好。就像下面這樣：
問題1

在下面這張圖中，我們在樣式上做了一些改進，讓它看起來更好一點：

  1. 重新排列整個網格佈局，使用垂直排列取代固定兩列布局。
  2. 將框架整體上移了一點。
  3. 對字型進行了縮放。

問題2

目光轉到CSS程式碼中，下面是我們要修改的程式碼：

h1 {
  font-size: 30px;
}
#navbar {
  margin: 30px 0;
}
#navbar a {
  font-size: 30px;
}
.grid {
  margin: 30px 0;
  grid-template-columns: 200px 200px;
}

更具體地說，我們需要在一個媒體查詢中做出以下調整：

  • 將h1的字型調整為20px；
  • 減少#navbar的上外邊距為15px；
  • 將#navbar的字型大小減少到20px；
  • 減少.grid的外邊距為15px；
  • 將.grid從兩列布局變為單列布局。

注意：樣式表裡不僅僅是這些CSS宣告，但是在這篇教程中我跳過它們，因為媒體查詢並不影響它們的設定。你可以在這裡獲取完整的程式碼。

舊方法

不使用CSS變數確實可以做到同樣的效果，但這樣會增加許多不必要的程式碼，因為上面大部分修改都需要將宣告在媒體查詢中重寫一遍。就像下面這樣：

@media all and (max-width: 450px) {
  
  navbar {
    margin: 15px 0;
  }
  
  navbar a {
    font-size: 20px;
  }

  h1 {
    font-size: 20px;
  }
  
  .grid {
    margin: 15px 0;
    grid-template-columns: 200px;
  }
}

新的方法

現在讓我們看看使用CSS變數是如何起作用的。首先，我們要宣告需要更改或複用的變數：

:root {
  --base-font-size: 30px;
  --columns: 200px 200px;
  --base-margin: 30px;
}

然後，我們只需要在app中使用它們就可以了。非常簡單：

#navbar {
  margin: var(--base-margin) 0;
}
#navbar a {
  font-size: var(--base-font-size);
}
h1 {
  font-size: var(--base-font-size);
}
.grid {
  margin: var(--base-margin) 0;
  grid-template-columns: var(--columns);
}

之後，我們可以在媒體查詢中修改這些變數值：

@media all and (max-width: 450px) {
  :root {
    --columns: 200px;
    --base-margin: 15px;
    --base-font-size: 20px;
}

這樣的程式碼是不是比之前要簡潔多了？我們只需要專注於:root選擇器就可以了。

我們將媒體查詢中的4個宣告減少到了1個，程式碼也從13行減少到了4行。

當然，這只是一個簡單的例子。想象一下，在一個大中型網站中，有一個--base-margin變數控制著所有的外邊距。當你想要在媒體查詢時修改屬性，並不需要用複雜的宣告填充整個媒體查詢，只是簡簡單單地修改這個變數值就可以了。

總之，CSS變數可以定義為未來的響應式。如果你想要學習更多的知識，我推薦你看我的免費教程。用不了多久你就能成為一個CSS變數大師。

檢視更多我翻譯的Medium文章請訪問：
專案地址：https://github.com/WhiteYin/translation

相關文章