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

原文地址：medium.freecodecamp.org/how-to-make…
做者：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. 從新排列整個網格佈局，使用垂直排列取代固定兩列布局。
2. 將框架總體上移了一點。
3. 對字體進行了縮放。

目光轉到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文章請訪問：
項目地址：github.com/WhiteYin/tr…