影響前端工程師超大的3個必備技能2-Media Query

-
影響前端工程師超大的3個必備技能2-Media Query





上了前端工程師課程才發現,原來RWD是由好多不同部分組成,今天為你介紹其中一個叫Media Query的玩意! 

RWD 網頁設計必備語法：Media Query

前端工程師在製作 RWD 響應式網頁時，一定會用到的 CSS 語法就是 Media Query。簡單來說，我們可以把 Media 視為 CSS 的擴充元件（這樣會比較好理解）。而 Media 後面多加一個「Query」代表網頁會先 Query (詢問) 其「擴充元件 (Media)」的類型 (就是所謂的Media Type，也是本篇前端工程師課程文章的講解重點)，再針對這些 Media Type 定義其樣式 (Media Features，中文譯作「媒體樣式」或是「媒體特徵」)。

 

Media Query 使用方法

如果要使用 Media Query ，則使用方式有下列三種：

1. 在 HTML5 中使用，以下範例為用 media 屬性判斷使用者的裝置大小：當螢幕小於 400 px 時，套用指定的 CSS 檔案「Screen.css」：


<link rel="stylesheet" type="text/css" media="screen and (max-device-width: 400px)" href="Screen.css">




2. 上面的功能，若不使用HTML5，而是在 CSS 中使用，則為：




＠media screen  and (max-device-width: 400px){...}




3. 你也可使用 @import




@import "screen.css" screen and (max-device-width: 400px)




看了以上 Media Query 的使用方法後，你會發現以上三種的範例中包含了「screen」、「and」和「max-device-width: 400px」。這三者分別為「媒體類型(media type)」、「判斷條件 (and/not/only)」和「媒體特徵 (media feature)」。媒體類型(media type)於此篇文章做說明、and/not/only 判斷條件於本篇文章做說明，而媒體特徵 (Media Feature) 的各式屬性也於此篇（頁面尺寸與顯示品質的屬性）與此篇（「顏色類」和「互動類」的屬性）列出。





本篇為「前端工程師的基礎RWD教學」系列文章第三篇，全系列文章如下:







 


   前端工程師的基礎RWD教學系列文章目錄

   




    

  1. 前端工程師的基礎RWD教學(一)RWD基礎概念
    2. 

  2. 前端工程師的基礎RWD教學(二)流動布局Fluid Grid
    3. 

  3. 前端工程師的基礎RWD教學(三)Media Query基礎之Media Query使用方法
    4. 

  4. 前端工程師的基礎RWD教學(四)Media Query基礎之Media Type媒體類型
    5. 

  5. 前端工程師的基礎RWD教學(五)Media Query基礎之and/not/only判斷條件
    6. 

  6. 前端工程師的基礎RWD教學(六)Media Query基礎之Media Features-上
    7. 

  7. 前端工程師的基礎RWD教學(七)Media Query基礎之Media Features-下
    8. 

  8. 前端工程師的基礎RWD教學-(八)流動圖片Fluid Image
    9. 



  








🙋延伸閱讀區：



影響前端工程師超大的3個必備技能1-RWD是什麼何方神聖?



影響前端工程師超大的3個必備技能3-Fluid Grid



前端工程師之路現在開始-Media Query的媒體特性-上



內湖阿宅變身高薪PYTHON工程師



真假難辨!人工智慧和真人寫的文章你分的清嗎?



阿逆母湯!!網路行銷課程沒人看,網頁淪為蚊子館?



中國IT教育領導品牌　達內教育集團第一家海外授權中心







`:




























































這個網誌中的熱門文章









前端工程師設定CSS背景的五種方法(一)背景固定模式設定






-














圖片







            如何固定模式讓前端工程師教你!第一關讓你輕鬆過關,立馬進入狀況!    CSS  background-attachment 決定背景圖片是否要跟著滑鼠滾動而上下移動，而它有三種不同的呈現方案：     第一種為當滑鼠上下滾動時，背景圖片與網頁主體跟著上下滾動     第二種為當滑鼠上下滾動時，背景圖片相對位置固定不動，呈現效果就像是網頁主體與背景是分開的     第三種為當滑鼠上下滾動時，背景圖片絕對位置固定不動，似乎網頁主體是浮在背景圖之上的感覺。     而 前端工程師 們通常會將CSS background-repeat 與  背景圖樣設定 (background-image)  搭配設計。     CSS background-attachment 基本語法如下：  background-attachment: 顯示參數;  而另外，有三種可以使用的顯示參數，來決定背景圖與網頁主體該以何種方式來搭配顯示，分別為  scroll （預設值，背景圖案的「相對位置」不會隨著滾動機制而移動，而網頁主體則會跟著滾動）、 fixed （背景圖案的「絕對位置」不會隨著滾動機制而移動，而網頁主體則還是會跟著滾動，彷彿網頁主體是浮在整張背景圖之上的感覺。多用於網頁背景圖為滿版的場合時使用）、 local （背景圖案與網頁主體都會跟著滾動機制而滾動。以下是針對這三種參數的範例：   CSS background-attachment 各種參數的範例   See the Pen  background-attachment-example  by Tedutw ( @Tedutw ) on CodePen .     現在新一代的網頁多採滿版設計，其中的「background-attachment: fixed;」參數，常被當代的 前端工程師 搭配「 background-repeat: no-repeat; 」參數使用，做出網頁主體都浮在高質感的背景圖的效果。              其他常用 CSS background 背景屬性說明連結  1. 背景顏色設定 (background-color)  2. 背景圖樣設定 (background-image)  3. 背景重複設定 (background-repeat)  4. 背景固定模式設定 (b








閱讀完整內容










前端工程師設定CSS背景的五種方法(五)設定背景顏色






-














圖片







        設定背景顏色原來對前端工程師來說超必須!這篇文章讓你超容易入門!     使用背景顏色設定 (background-color)屬性， 前端工程師 可利用之，讓簡潔的純色背景襯托出網頁的主體，也可決定網頁的風格。像是背景純黑的網頁，與背景為粉紅色的網頁，風格就大不相同。其實 background-color 能夠使用的範圍除了網頁背景色外，也可以讓前端工程師用來設計表格、DIV 區塊、span 等網頁元素的背景顏色。       CSS background-color 基本語法如下：  background-color: 顏色名稱或色碼 ;  background-color 可以使用的顏色值包含顏色的英文名稱、十六進位制色碼以及 RGB 色碼，挑選顏色請參考： 網頁顏色代碼對照表 。    CSS  background-color 語法範例一、網頁背景  html{background-color: 顏色名稱或色碼 ;}   See the Pen  background-color-bg-example  by Tedutw ( @Tedutw ) on CodePen .       CSS background-color 語法範例二、DIV 區塊、H1-H6 標題等斷落的背景顏色  div(可替換成 h1、p 等網頁元素標籤){background-color: 顏色名稱或色碼 ;}   See the Pen  background-color-div-example  by Tedutw ( @Tedutw ) on CodePen .      同樣的技巧還可用在其他的網頁元素，若想採用圖片當成背景，請參閱： 2. 背景圖樣設定 (background-image) 。              其他常用 CSS background 背景屬性說明連結  1. 背景顏色設定 (background-color)  2. 背景圖樣設定 (background-image)  3. 背景重複設定 (background-repeat)  4. 背景固定模式設定 (background-attachment)  5. 背景圖片位置設定 (background-position)            延伸閱讀：   前端工程師設定CSS








閱讀完整內容










前端工程師入門HTML5就靠這些撇步!(8上)製作拖曳元素






-














圖片







         可拖曳的HTML5元素怎麼做?今天讓我來大顯身手!下次你就能出風頭啦!\   HTML5  Drag & Drop API-讓元素變得可拖曳   你可能不知道，過去在網頁裡面實現 Drag & Drop 是很麻煩的！一定要配合 CSS、onmousedown、onmouseup、setInterval() 等，才能做出元件拖曳的視覺效果。但！現在各位有福啦！ HTML5  有直接的 Drag & Drop 機制，讓 前端工程師 可直接使用 drag and drop 的功能，讓使用者直接透過拖曳的方式，把要上傳的檔案拉到瀏覽器當中。   所有的 HTML 元素都可設成「可拖曳」的。要讓元素變得可以拖曳，只要在該元素的原始碼中加入 draggable 屬性，如下例 (讓圖片變得可以拖曳)：  <img draggable="true" />    HTML5  Drag & Drop API 的範例   See the Pen  HTML 5 Drag and Drop  by Tedutw ( @Tedutw ) on CodePen .      讓元素可拖放-HTML的部分   除了<a>、<img>，其他 HTML 裡的元素本來是被預設為不可以作為源元素的，也就是說，我們本來是「拖不動」 它的。但在 HTML5 ，只要為它加上 draggable="true" 屬性，它就能「被拖曳」了。下面是上例的 HTML 碼的一部分：   See the Pen  HTML 5 Drag and Drop  by Tedutw ( @Tedutw ) on CodePen .     draggable 屬性上加了 draggable="true"，這樣就能讓這個 div 元素變成可以拖曳的 (至少在 Chrome 中可以)。但是我們還需要使用 Javascript 在 dragstart 裡為 dataTransfer 設置一些數據，因此需要加上下面的代碼。這樣可以確保它可以被拖曳。   See the Pen  HTML 5 Drag and Drop-2  by Tedutw ( @Tedutw ) on CodePen 








閱讀完整內容