前言：這是一篇轉(zhuǎn)載文，確實(shí)寫的不錯(cuò)，今天分享給大家，希望大家能集百家之長，學(xué)到更多有用的知識~

摘要：這是一篇2018年制作響應(yīng)性網(wǎng)頁的快速教程。

如果你之前沒有聽說過CSS變量，那么現(xiàn)在我將告訴你：它是CSS的新特性，讓你能夠在樣式表中使用變量的能力，并且無需任何配置。

實(shí)際上，CSS變量能夠讓你改變以往設(shè)置樣式的老方法：

而使用了CSS變量之后：

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

如果你想要學(xué)習(xí)CSS變量的知識，可以登錄Scrimba看我的視頻課程，或是閱讀我在Medium上寫的文章：如何學(xué)習(xí)CSS變量。

好了，現(xiàn)在讓我們看看如何使用這個(gè)新知識來更加簡單地制作響應(yīng)式站點(diǎn)吧。

初始配置

讓我們來把下面這個(gè)頁面變成響應(yīng)式的吧：

這個(gè)頁面在PC端看上去很不錯(cuò)，不過你可以看到它在移動(dòng)端的表現(xiàn)并不好。就像下面這樣：

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

重新排列整個(gè)網(wǎng)格布局，使用垂直排列取代固定兩列布局。

將框架整體上移了一點(diǎn)。

對字體進(jìn)行了縮放。

目光轉(zhuǎn)到CSS代碼中，下面是我們要修改的代碼：

更具體地說，我們需要在一個(gè)媒體查詢中做出以下調(diào)整：

將h1的字體調(diào)整為20px；

減少#navbar的上外邊距為15px；

將#navbar的字體大小減少到20px；

減少.grid的外邊距為15px；

將.grid從兩列布局變?yōu)閱瘟胁季帧?/p>

注意：樣式表里不僅僅是這些CSS聲明，但是在這篇教程中我跳過它們，因?yàn)槊襟w查詢并不影響它們的設(shè)置。你可以在這里獲取完整的代碼。

舊方法

不使用CSS變量確實(shí)可以做到同樣的效果，但這樣會(huì)增加許多不必要的代碼，因?yàn)樯厦娲蟛糠中薷亩夹枰獙⒙暶髟诿襟w查詢中重寫一遍。就像下面這樣：

新的方法

現(xiàn)在讓我們看看使用CSS變量是如何起作用的。首先，我們要聲明需要更改或復(fù)用的變量：

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

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

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

我們將媒體查詢中的4個(gè)聲明減少到了1個(gè)，代碼也從13行減少到了4行。

當(dāng)然，這只是一個(gè)簡單的例子。想象一下，在一個(gè)大中型網(wǎng)站中，有一個(gè)--base-margin變量控制著所有的外邊距。當(dāng)你想要在媒體查詢時(shí)修改屬性，并不需要用復(fù)雜的聲明填充整個(gè)媒體查詢，只是簡簡單單地修改這個(gè)變量值就可以了。

總之，CSS變量可以定義為未來的響應(yīng)式。如果你想要學(xué)習(xí)更多的知識，我推薦你看我的免費(fèi)教程。用不了多久你就能成為一個(gè)CSS變量大師。

原文：https://segmentfault.com/a/1190000013512723

最后：“相信有很多想學(xué)前端的小伙伴，今年年初我花了一個(gè)月整理了一份最適合2018年學(xué)習(xí)的web前端干貨，從最基礎(chǔ)的HTML+CSS+JS到移動(dòng)端HTML5等都有整理，送給每一位前端小伙伴，53763，1707這里是小白聚集地，歡迎初學(xué)和進(jìn)階中的小伙伴。”

祝大家早日學(xué)有所成，拿到滿意offer，快速升職加薪，走上人生巔峰。