響應式鋼琴

@media

CSS中存在著一類好用的條件規則，語法是@開頭，大致可以想成當滿足特定條件時，其中的樣式才會套用，@media是用來分類媒體特性，查詢使用者正在使用的媒體來套用其中的樣式，很抽象？舉例：

@media (max-width: 768px) {
  #piano {
    width: 358px;
  }
}
/* 當視窗的寬度 小於 768像素時，套用#piano寬度為358像素的樣式 */

可以用 and 聯集兩個條件

@media (max-width: 1199px) and (min-width: 769px) {
  #piano {
    width: 675px;
  }
  
/* 當視窗的寬度 小於 1199像素，而且 大於 769px時，套用#piano寬度為675像素的樣式 */

這樣子就可以製做出，在網頁、平板或手機都可以兼顧的網頁樣式，橫向或直立所看到的畫面不同，讓使用者體驗的感覺更好，透過響應式鋼琴的任務練習練習。

下篇：技術

引用與資源：
freecodecamp
mdn_web_@media
我的響應式鋼琴