響應式網站 RWD(Responsive Web Design)入門筆記 (1)

一、RWD 三大要素

    1. Media Queries(媒體查詢,依照媒介體尺寸不同,調整顯示)
    2. Fluid Grids Layout(流動的區塊編排,隨著螢幕大小變動)
    3. Fluid╱Flexible Media(流動、彈性網頁內容)

二、CSS Media Queries

1. 不管用啥方式開發,都要先加這一行
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;">
強迫網頁的內容,以裝置目前的寬度來呈現

2. CSS 語法
@media not|only mediatype(媒體類型) and (media feature條件) {
    CSS-Code;
}

====== Media Types (媒體類型)  ===================

  all     全部
  print     印表機
  braille    點字機
  screen     視窗螢幕大小
  handheld 行動裝置
  tv    電視
  projection     投影機

 ====== Media Features 條件 ===================

  device-height     裝置高度
  device-width     裝置寬度
  width     視窗寬度
  height     視窗高度
  max-device-height     最大裝置高度
  max-device-width     最大裝置寬度
  max-height     最大高度
  max-width     最大寬度
  min-device-width     最小裝置寬度
  min-device-height     最小裝置高度
  min-height     最小高度
  min-width     最小寬度
  orientation     裝置方向,可設定 portrait (直向) or landscape (橫向)

======  AND  ===============

EX:
@media screen and (max-width: 768px) {
    .div1 { font-size: 20px; }
}
螢幕寬度「最大」沒有超過768px,就執行區塊內的 CSS
==>>螢幕寬度「小於等於」768px,就執行區塊內的 CSS

====== OR 的寫法 =============

用AND,中間用逗號區隔,EX:
@media screen and (max-width: 600px), screen and (min-width: 800px) {
    div { background: white; }
}

符合螢幕寬度在 600px(含)以下,或 800px(含)以上

====== NOT ===================

not 用來「排除」符合表達式的 Media Features
@media not screen and (max-width: 600px) {
     div { background: red; }
}

====== ONLY ===================
@media only screen and (min-width:480px) {
    div { background: #F4F4F4; }
}

media queries 是 CSS3 對於 media type 的一個延伸功能
所以不支援 media queries 的瀏覽器還是要能識別 media type
only是用來針對那些不支援 media queries 卻需要讀取 media type的設備隱藏樣式用的

 

標籤 (Tags)