前端工程師關於Media Queries的分享,就讓我們先來認識認識這個新朋友吧!!

 前端工程師關於Media Queries的分享,就讓我們先來認識認識這個新朋友吧!!

 

【前文提要】RWD 網頁設計必備語法:Media Query 前端工程師在製作 RWD 響應式網頁時,一定會用到的 CSS 語法就是 Media Query。簡單來說,我們可以把 Media 視為 CSS 的擴充元件(這樣會比較好瞭解)。而 Media 後面多加一個「Query」代表在網頁設計的時候會先 Query (詢問) 其「擴充元件 (Media)」的類型 (就是所謂的Media Type,也是本篇文章講解重點),再針對這些 Media Type 定義其樣式 (Media Features,中文譯作「媒體樣式」或是「媒體特徵」)。參考文章:如何在RWD網頁中套用Media Query語法Media Query 的語法包括了三個層面:媒體類型 (Media Type)、and/not/only 判斷條件與媒體特徵 (Media Features)。and/not/only 判斷條件本篇文章做說明,而媒體特徵 (Media Feature) 的各式屬性也於此篇(頁面尺寸與顯示品質的屬性)此篇(「顏色類」和「互動類」的屬性)列出。本篇就對於媒體類型 (Media Type) 說明如下:
前端工程師在運用 Media Query 時,首先要指定媒體類型 (media type) 。目前常用的有多種分別介紹如下:
媒體類型(media type) 簡介
all 所有裝置
screen 螢幕裝置 ( 除了 print 和 speech 之外的設備 ) 大小
print 印表機裝置 (包含使用列印預覽所產生的畫面,如列印為 pdf)
projection 投影機裝置
speech 朗讀裝置 (針對可「讀出」網頁的設備)
本篇為「前端工程師的基礎RWD教學」系列文章第四篇,全系列文章如下:
前端工程師的基礎RWD教學系列文章目錄
  1. 前端工程師的基礎RWD教學(一)RWD基礎概念
  2. 前端工程師的基礎RWD教學(二)流動布局Fluid Grid
  3. 前端工程師的基礎RWD教學(三)Media Query基礎之Media Query使用方法
  4. 前端工程師的基礎RWD教學(四)Media Query基礎之Media Type媒體類型
  5. 前端工程師的基礎RWD教學(五)Media Query基礎之and/not/only判斷條件
  6. 前端工程師的基礎RWD教學(六)Media Query基礎之Media Features-上
  7. 前端工程師的基礎RWD教學(七)Media Query基礎之Media Features-下
  8. 前端工程師的基礎RWD教學-(八)流動圖片Fluid Image

 

推薦閱讀:

HTML5教學讓你的網頁更容易被搜尋引擎"了解"

HTML5教學之微數據的格式教學

HTML5教學之微數據小分身

上了Python課程,再思考如何能向十大世界人工智慧研發先驅看齊

上Python課程,讓你跳行不再如隔山

在家學習Python課程,到Windows10商店挑選最適合的版本使用

在HTML5教學中學CSS語法,框住所有資訊

arrow
arrow

    uidesignxiaoshow 發表在 痞客邦 留言(0) 人氣()