Basic CSS: Use a media query to change a variable

基礎 CSS: 使用 media query 改變變數

本篇文章以CSS為主題,提供給在Free Code Camp學習的使用者繁體中文版本的操作指導,每篇文章的出處連結都會放在文末,請各位閱讀完中文指導後回到原文連結進行挑戰。那麼,我們開始囉~

CSS Variables can simplify the way you use media queries.
CSS 變數還可以簡化 media queries 的使用方式。

For instance, when your screen is smaller or larger than your media query break point, you can change the value of a variable, and it will apply its style wherever it is used.
舉例來說,當裝置螢幕與 media query 設定的斷點不相符時,我們可以改變 CSS 變數的屬性值,以套用樣式於不同尺寸的瀏覽器。


In the :rootselector of the media query, change it so --penguin-sizeis redefined and given a value of 200px. Also, redefine --penguin-skinand give it a value of black. Then resize the preview to see this change in action.
media query 裡的 :root 選擇器裡新增 200 px 的變數 --penguin-size 以及改變 --penguin-skin 為黑色。試試改變預覽畫面尺寸會造成什麼變化吧!