這天草莓看起來異常的開心。

「怎麼啦草莓這麼開心」
「熊熊你看你看～我剛剛發現這個網頁這樣拉來拉去的時候，頁面會跟著變化耶！」草莓指著螢幕說。

「喔～這個叫做 RWD 啊」熊熊說。
「RWD 是什麼的縮寫嗎？」
「答對了，RWD 的全名是響應式網頁設計 (Responsive Web Design)，是一種現今主流網站都會採用的一種設計方法，目標是讓網頁在各個裝置上的呈現因應其尺寸大小都能表現出恰到好處的顯示～」

「熊熊可以再解釋多一點嗎？」
「你想像一下，網頁資訊就好像是水ㄧ樣，而水可以自由流動的對吧？網頁上的各個元素也應該在不同大小的裝置上跟著改變，有些區塊可能會被隱藏起來，簡言之就是一個動態改變排版的方式，大概就像下面這張圖。」

「了解了～那 CSS 應該也可以做到這件事對吧？」
「你問到今天的重點了！CSS 的確有這樣的概念存在，叫做 Media Query，具體寫法像是下面這段。」

@media (min-width: 768px) {
  p {
    font-size: 32px;
  }
}

「看到之前沒見過 min-width 也先不用急著打退堂鼓，這裡的 min 意思代表這個數字以上的都是用裡頭的樣式設定，所以這段 CSS 語法代表的意思就是如果螢幕尺寸在 768 以上的話，就針對 p 標籤的字體大小調整成 32px。」

「嗯嗯！又學到一招了呢！」草莓說。

「草莓呀～那我考你一題！」

@media (min-width: 768px) and (max-width: 979px) {
  p {
    font-size: 32px;
  }
}

「這段 CSS 語法是什麼意思呢草莓？」
「讓偶想想看～」草莓努力思考中。

「啊～我知道了！上面那段語法的意思是說，如果網頁尺寸大小介於 768px 到 979px 之間的話，p 標籤的字型大小就會被調整成 32px，對嗎？」草莓說。

「答對了～在 media query 的設定中可以透過 and，把兩個區間的尺寸寫在一起，使用上會更加有效率喔！」熊熊補充說。

「不過感覺做這件事也挺麻煩的，現在好多不同尺寸的裝置喔」草莓說。

「沒錯，這真的不是一件容易的事情，加上目前網站流量有超過 50% 以上都是來自手機，所以也有人提出 mobile-first 的設計概念，而像是 Google 搜尋引擎也會把手機上的表現納入 SEO 的排名參考裡喔！」

「要當一個前端工程師真的很不容易呢。」草莓說。

明日待續～