media type

• all 所有裝置 (此為默認值，可省略不寫)
• screen 螢幕裝置
• print 印刷裝置
• speech 朗讀裝置

    @media print {
      /* 印刷裝置用，通常會關閉動畫 & hover */
    }

方向 orientation

• landscape (寬>高) 橫屏
• portrait (高>寬) 豎屏

逗號判斷

• 逗號 代表 or (表任一符合即套用)

  @media (min-width: 700px), handheld and (orientation: landscape) { ... }

HTML 載入不同的CSS檔

<link rel="stylesheet" type="text/css" href="all.css" media="screen">
<link rel="stylesheet" type="text/css" href="a.css" media="screen and (max-width: 767px)">
<link rel="stylesheet" type="text/css" href="b.css" media="screen and (min-width: 768px) and (max-width: 979px)">

基礎 media mixin 使用

  $media-md: 768px;
  @mixin media-md() {
    // 大於 768px 套用
    @media all and (min-width: $media-md) {
      @content;
    }
  }
  
  // 可以寫於元件之下
  .test {
    @include media-md{  
      border: 1px solid red;
    };
  }
  
  // 亦可統一管理同一個條件下的樣式
  @include media-md{  
    .test2 {
      background-color: green;
    }
  };

代入變數

• mixin 代入變數的版本
• 可用 up / down / between

$media-md: 768px;
$media-xs: 576px;

@mixin media-bp-up($width) {
  @media all and (min-width: $width) {
    @content;
  }
}

@mixin media-bp-down($width) {
  @media all and (max-width: $width) {
    @content;
  }
}

@mixin media-bp-between($min-w,$max-w) {
  @media all and (min-width: $min-w) and (max-width: $max-w){
    @content;
  }
}

• 使用

// 可寫於元件之下
.test {
  // 大於 768px 
  @include media-bp-up($media-md){ 
    color: red;
  };
  // 小於 768px 
  @include media-bp-down($media-md){ 
    border: 1px solid blue;
  };
  // xs(576) & md(768) 之間
  @include media-bp-between($media-xs,$media-md){
    background-color: #eee;
  };
}
// 亦可統一管理同一個條件下的樣式
@include media-bp-down($media-md){  
  .test2 {
    background-color: green;
  }
};

參考資料

CodePenPlayGround
CSS Media Queries 詳細介紹
[CSS] Media Query
MDN