RWD響應設計--要點介紹

viewport：

在head裡面設定viewport，讓字體不會隨著裝置而改變大小。

html：

• width=device-width：寬度隨裝置而改變
• initial-scale：初始狀態是一倍
• user-scalable=1：0為不能拖拉；1為可以拖拉
• maximum-scale=1.5：最大拖拉大小為1.5倍
• minimum-scale=1.5：最小拖拉大小為1.5倍

media-query：

在樣式表（ css ）中於不同裝置尺寸中，設定不同的格線寬度。
當物件到達某個裝置大小時，內容物會隨之改變大小或者換行。

Queries 有四種使用方式，分別是 or、and、not 和 only，除了 or 使用逗號「,」表現，其他的就直接寫出英文字。

• OR

例子如下：螢幕尺寸大於等於 400px 「或」裝置橫放時，字體會變成藍色 50px，反之就是黑色 30px。

h1{
      font-size:30px;
  }
  @media (min-width:400px), (orientation: portrait){
      h1{
          font-size:50px;
          color:red;
      }
  }

• And

使用 AND 必須要所有條件皆滿足，例子如下

  h1{
      font-size:30px;
  }
  @media screen and (min-width:400px) and (max-width:600px){
      h1{
          font-size:50px;
          color:blue;
      }
  }

• Only

ONLY 可以指定「只有」某種裝置媒體才能套用某些樣式，會寫在 media query 的字首， 目前這種撰寫方式越來越少見，最主要是因為使用舊版裝置媒體的人越來越少，因此直接採用 AND 或 OR 的寫法就能夠符合絕大多數的需求。

• NOT

NOT 的目的在於排除一些裝置媒體，會寫在 media query 的字首，。
＊NOT 和 ONLY 後方都必須先接 media type ( 像是 screen 或 print )，不然會沒有作用。


各種裝置常用斷點參考

例子如下：
Laptop：
/* ----------- Non-Retina Screens ----------- */
@media screen 
  and (min-device-width: 1200px) 
  and (max-device-width: 1600px) 
  and (-webkit-min-device-pixel-ratio: 1) { 
}

/* ----------- Retina Screens ----------- */
@media screen 
  and (min-device-width: 1200px) 
  and (max-device-width: 1600px) 
  and (-webkit-min-device-pixel-ratio: 2)
  and (min-resolution: 192dpi) { 
}


Ｑuery參考：https://www.oxxostudio.tw/articles/201810/css-media-queries.html

斷點參考：https://css-tricks.com/snippets/css/media-queries-for-standard-devices/