靠這三技能,前端工程師向"不專業"說再見~(3)媒體查詢

-
靠這三技能,前端工程師向"不專業"說再見~(3)媒體查詢


對前端工程師來說,學完這最後的概念才算是學完整個組合!別走開快進來看!

 

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. 



  








🌌延伸閱讀看這裡：



靠這三技能,前端工程師向"不專業"說再見~(1)RWD基礎觀念



靠這三技能,前端工程師向"不專業"說再見~(2)流動布局 



前端工程師課程再進化-Media Query的媒體特性(上篇)



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



張忠謀列出幾大原因,告訴你一定要學網路行銷課程的理由



HTML5教學教你網頁設計標籤的活用



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







`:
























































這個網誌中的熱門文章









Python控制結構一點就通!(5)while迴圈






-














圖片







     關於Python的while迴圈,它可以製造出那些效果?一步步跟著這篇走,剩下的你不用怕啦!   關於Python-while 迴圈     Python  的 if 條件判斷式【請參考上篇的 Python教學 ： Python控制結構2.if else條件判斷(1) 】，若評估為 True【請參考： Python控制結構1.布林值Boolean-True or False? 】 的話，就會執行一次；反之則不執行。   Python  的 while 迴圈跟 if 條件判斷式相似，但是不同的是，它不只執行一次。只要條件成立，它就會不斷地重複執行。就算是有其中一段代碼被評估為 False，下一段代碼仍會被執行。   while 迴圈構成，包含了 。   以下範例的 while 迴圈中有一個變數「i」， 初始值 為「1」； 更新值（又稱為調整值） 為「i+1」； 讓迴圈結束的條件 為「i <=5」。   這次 Python教學 給你以下範例，讓 i 的從初始值開始，程式每執行一次，i 就等於上一回合的數值再「+1」一次，直到 i 等於 5 為止停止，寫法如下：     i = 1 #初始值  while i <=5:       #讓迴圈結束的條件     print(i)     i = i + 1       #更新值 (調整)    則結果為：    1 2 3 4 5 >>>   while迴圈的「infinite loop(無限循環)」  Python  的 while 迴圈中，有一種被稱作「infinite loop(無限循環)」，當條件（為True）成立時，該程式就會永不停止地重複執行。   「infinite loop(無限循環)」的範例如下：    while 7==7:   print("這是無限循環迴圈")   結果，「這是無限循環迴圈」這行字就會不斷的重複顯示。  若你真的受不了，你可以 按鍵盤快速鍵「Ctrl-C」以阻止它繼續重複顯示。  以下也是無限循環迴圈的另一個例子，來看看它的結果如何吧！    x=1 >>> while x>0:          print(x)          x+2  結果馬上會跳出一堆數字，且不斷的在跳出中。後出來的數字，都是








閱讀完整內容










前端工程師絕不能搞錯的CSS中:逗號.空格的差別!






-














圖片







        想成為前端工程師?那CSS中最基本的逗號.空格再搞錯,豈不是太不專業了!     有時在 HTML 中， 前端工程師 們會對同一個標籤給予兩個以上的 Class 名稱，如以下所示:    < div  class = " first second " > </ div >     對於這類有兩個以上的 Class 名稱的 HTML，其 CSS 選擇器可能會用以下的三種情況顯示。而聰明的你，分辨得出這些 CSS 有什麼不同嗎?    /*1. 兩個 class 中有空格*/   .first .second /*2. 兩個 class 中沒有空格*/ .first.second  /*3. 兩個 class 中出現逗號*/   .first,.second   對於 CSS 及前端工程師的初學者來說，上述三種 CSS  因為長得很像，所以經常傻傻分不清楚。究竟兩個 class 中間空格、沒空格、有逗號，到底差在哪裡? 別擔心，立刻講解給你聽：       1. 兩個 class 中有空格的例子：五個區塊中，階層必須是要在 first 區塊之下的 second 區塊，才會顯示黑底白字的 CSS 設定   See the Pen  .first與 .second中間有空格的例子  by Tedutw ( @Tedutw ) on CodePen .       2. 兩個 class 中沒有空格的例子：五個區塊中， div class 名稱必須同時出現 first 與 second 才會顯示黑底白字的 CSS 設定   See the Pen  .first與 .second中間無空格的例子  by Tedutw ( @Tedutw ) on CodePen .       3. 兩個 class 中有逗號的例子：五個區塊中，只要 div class 名稱中有出現 first 或是 second 的區塊，就會顯示黑底白字的 CSS 設定   See the Pen  .first與 .second中間有逗號的例子  by Tedutw ( @Tedutw ) on CodePen .     註 : 以上三個範例的 HTML 碼都一樣    延伸閱讀：   前端工程師入門款小常識-CSS碼特性一下就上手!    








閱讀完整內容










網頁前端CSS必學兩屬性:display與visible






-














圖片







        今天要介紹網頁前端中的兩個CSS屬性:display與visible屬性!    本篇介紹 網頁前端 排版的兩個 CSS 屬性：display 屬性與 visibility 屬性。   CSS ：display 屬性   display:block   對於 CSS 語法來說， 網頁前端 的每個元素都是一個矩形盒（rectangular box）模型。而使用「display」屬性，便可以決定「盒（box）」的呈現方式。   又「區塊元素（block element）」則會佔用可用寬度的最大值，前後有換行符。   以下範例分別顯示了是否有將<span>元素顯示為區塊元素（block element）的結果。   在下方的顯示視窗中，按「CSS」，就可以觀看 CSS 的語法如何設定了！   See the Pen  display: block  by Tedutw ( @Tedutw ) on CodePen .     上述範例的 網頁前端  CSS 語法設定如下：  span.block{   display:block; }   display:inline  inline 元素只佔用可用寬度的最大值，並不強制換行。   將上一段範例的<span>元素，CSS 換成「display: inline」的結果如下。跟上一個範例一樣，在下方的顯示視窗中，按「CSS」可以觀看 CSS 的語法如何設定。   See the Pen  display: block  by Tedutw ( @Tedutw ) on CodePen .     上述範例的 CSS 語法設定如下：  span{   display:inline; }   display:none  「display:none」用來將元素隱藏使用，當元素隱藏後，就不佔用任何空間了，且在 網頁前端 頁面顯示時也不會被展現出來，就好像該元素不存在一樣。   在以下範例中，我們將第 2、4 段設為「display:none」，其他設為「display:block」。   See the Pen  display: none  by Tedutw ( @Tedutw ) on CodePen .     上述介紹的「block」、「inline」、「none」都是最常碰到的的 d








閱讀完整內容