娶了UI設計師的Python工程師-北歐生活

真正內行的前端工程師怎麼會把Media Query學一半?最後一個關於它的"流動圖片",現在端上來給你! 許多 前端工程師 在面對 網頁設計 時，都要處理 RWD網頁 。這些 RWD網頁 中的圖片如下圖所示，能根據網頁的大小而跟著放大或縮小。這就是所謂的「Fluid Image (流動圖片)」。 在 RWD網頁 中圖片的顯示方式有兩種，一種是傳統的「<img>」標籤，另一種就是直接使用 CSS 的背景圖。在網頁中插入一般的圖片，也就是使用「<img>」標籤的場合時，只需將其 width 或是 height 其中一個尺寸設定為百分比 ( % )，另一個則設為 auto 則可以達到 RWD 的效果，範例如下： #banner { max-width: 80%; /*最大寬度設為 80% 而不是 100%，是為了避免圖片糊掉*/ height: auto; /*高度設為 auto 好讓圖片可以等比例縮放*/ } 上述為一般圖片的 Fluid Image 設定，接下來說明背景圖的部分。 相信大家已經看過夠多美美的滿版圖片的網頁了吧？這是因為在背景圖的設定上，CSS3 的新屬性「background-size」可以指定背景圖片的大小是否可填滿整個容器。未指定「background-size」屬性的話就是 auto 原圖的大小；如果有指定為 cover 的話，那就可以使背景填滿容器。 快來看看以下背景圖片的 Fluid Image 設定為填滿容器的語法： #banner { background-size: cover; } 上過 網頁設計 課程的 前端工程師 應該可以一目了然： 下圖為 background-size 是否有指定為 cover 的差異。左上為有指定為 cover 的範例，右下為無指定 cover ，若圖尺寸不夠則無法填滿。 本篇為「前端工程師必備的RWD基礎」系列文章最後一篇，全系列目錄如下: (目錄) 前端工程師必備的RWD基礎(一)RWD基礎概念 前端工程師必備的RWD基礎(二)流動布局Fluid Grid 前端工程師必備的RWD基礎(三)Media Query基礎之Media Q...

前端工程師在使用Media Query時,會先指定媒體類型,而今天就直接用表格整理出目前大家都在使用的類型!    【前文提要】 在 網頁設計 裡，何謂 Media Query 與 Media Feature？ 前端工程師 在製作 RWD 響應式網頁 時，一定會用到的 CSS 語法就是 Media Query 。簡單來說，我們可以把 Media 視為 CSS 的擴充元件，會比較好理解，而 Media 後面多加一個「Query」代表做 網頁設計 時，網頁會先 Query (詢問) 其「擴充元件 (Media)」的類型 ( Media Type )，再針對這些類型 ( Media Type ) 定義其樣式 (Media Feature)，而這個樣式就是所謂的「Media Feature (中文譯作「媒體樣式」或是「媒體特徵」)」。 參考文章： 如何在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 朗讀裝置 (針對可「讀出」網頁的設備) 本篇為「 前端工程師...

各種前端工程師一定都要學的media query技巧,今天教你這些插入字要什麼時候插入! 【前文提要】 RWD 網頁設計 必備語法：Media Query 前端工程師 在製作 RWD 響應式網頁 時，一定會用到的 CSS 語法就是 Media Query 。簡單來說，我們可以把 Media 視為 CSS 的擴充元件，會比較好理解，而 Media 後面多加一個「Query」代表做 網頁設計 時，網頁會先 Query (詢問) 其「擴充元件 (Media)」的類型 ( Media Type )，再針對這些類型 ( Media Type ) 定義其樣式 (Media Feature)，而這個樣式就是所謂的「Media Feature (中文譯作「媒體樣式」或是「媒體特徵」)」。 參考文章： 如何在RWD網頁中套用Media Query語法 而 Media Query 的語法包含了三個部分：媒體類型 ( Media Type )、and/not/only 判斷條件與媒體特徵 ( Media Features )。「 媒體類型 (Media Type)」已在本系列的前篇文章做說明，而媒體特徵 (Media Feature) 的各式屬性也於 此篇（頁面尺寸與顯示品質的屬性） 與 此篇（「顏色類」和「互動類」的屬性） 列出。 本篇就針對「and/not/only 等 Media Query 的判斷條件做說明如下： Media Query 語法可加入 ：and、or、not 和 only，而這篇主要為您整理相關的條件，教您如何判斷。 分別介紹如下：   🔺 Media Query 之 and 使用方法 1. 當單一條件成立時 範例：如果螢幕寬度超過 600px 以上時，就套用此份 css 設定 @media screen and (min-width:600px) { CSS設定 } 2. 同時符合兩種條件 範例：如果螢幕寬度介於 600 px ~ 800 px 時，就套用此份 css 設定 @media screen and (min-width:600px) and (max-width:800px) { CSS設定 } 3. 兩者條件...

今天的前端工程師課程就能把Media Query的媒體特性學完啦!壓軸的特性怎能錯過? 【前文提要】 何謂 Media Query 與 Media Feature？ 前端工程師 在製作 RWD 響應式網頁 時，一定會用到的 CSS 語法就是 Media Query 。簡單來說，我們可以把 Media 視為 CSS 的擴充元件，會比較好理解，而 Media 後面多加一個「Query」代表網頁會先 Query (詢問) 其「擴充元件 (Media)」的類型 ( Media Type )，再針對這些類型 ( Media Type ) 定義其樣式 (Media Feature)，而這個樣式就是所謂的「Media Feature (中文譯作「媒體樣式」或是「媒體特徵」)」。 參考文章： 如何在RWD網頁中套用Media Query語法 而 Media Query 的語法包含了三個部分：媒體類型 ( Media Type )、 and/not/only 判斷條件 與媒體特徵 ( Media Features )。「 媒體類型 (Media Type)」與「 and/not/only判斷條件 」已在本系列的前篇文章做說明，此篇就針對媒體特徵 (Media Feature) 的「顏色類」和「互動類」屬性做說明。而至於「視窗或頁面尺寸類 (Viewport/Page Dimensions)」以及 「顯示品質類 (Display Quality)」的屬性也已於 此篇 文章做說明。 本篇接續前篇介紹 Media Features 媒體特性的互動 (Interaction)與顏色 (Color) ： 用來定義互動 ( Interaction ) 的常見 Media Features 媒體特性一覽表 媒體特徵 說明 pointer、any-pointer 游標準確度 游標裝置 ( 例如滑鼠 ) 的準確性，有三個選項如下 none ：表示沒有游標裝置 coarse ：表示精準度較差的游標裝置，例如觸控螢幕 hover、any-hover hover 反應 簡單來說，hover 是在控制當滑鼠移至某元件時，某元件該如何...

今天前端工程師課程,要更深入探討Media Query!首先,用表格帶你認識視窗.頁面尺寸和顯示品質的特性! 【前文提要】 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教學 系列文章目錄...

對前端工程師來說,學完這最後的概念才算是學完整個組合!別走開快進來看!   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 判...

前端工程師在學習RWD時,這叫"流動布局"的小東西也超級重要,不學就等於少一個小螺絲! 前端工程師 在撰寫 RWD網站 時，所使用流動布局 Fluid Grid (又稱「液態布局」或「液態網格」）是兩種技術的組合：「Grid Design (網格式設計)」和「Liquid Layout (液態排版)」，介紹如下： Grid Design (網格式設計) 而設定相對尺寸 - 百分比 (%) 的同時，也要制定寬度的最大值與最小值。當寬度超過或低於某限制時，版面依然可以固定。這樣一來，若螢幕寬度大於其最大值時，元素的兩側就會留白，這樣就可以確保在 網頁設計 做完之後，網頁的版面不管在什麼裝置上都能保持適合閱讀的介面。 網頁設計 的過程中，會使用<div>進行排版，寫法有兩種：「float (浮動) 」與「display-inline-block」   1.float (浮動) 下方的範例用 float 將 4 個 div 由左至右排序。在寬螢幕上可以並排展示，但是在行動裝置上，4 個 div 則會依序自動調整排列位置：後方的 div 會自動移至前一個 div 下方。 See the Pen float-right-n-left by Tedutw ( @Tedutw ) on CodePen . 結果就算位置重新調整，這 4 個 div 仍然是靠左、或靠右。因為他的原理是使用 「float: left」將元素浮動靠左對齊。你也可以用 「float: right」將元素浮動靠右對齊   2.display: inline-block 跟上述的「float (浮動) 」相同，都可將元素做到靠左對齊或靠右對齊，差異是 float (浮動) 會與其他的元素重疊。相反的，display-inline-block 就沒有這個缺點。 兩者差異的例子如下： See the Pen float vs inline:block by Tedutw ( @Tedutw ) on CodePen . < Liquid Layout (液態排版) 另一個能達成「流動布局 Fluid Grid」的技術是「Liquid Layout (液態排版)」，主要原理就是把尺寸單位改成...

前端工程師口中的RWD到底是什麼?別擔心,讓我們一起剖析它! 為何寫 RWD 響應式網站會成為當代 前端工程師 的必備技能？那是因為 RWD 響應式網站的元素 (圖片、影片等) 可以跟著螢幕大小而變動。 而響應是網站又是什麼呢？響應式網站 (RWD) 是基於 流動布局（Fluid Grid） 、流動圖片 (Fluid Images) 以及媒體查詢（Media Queries）等核心三個概念的技術的組合，之後在 網頁設計 中，呈現出非固定尺寸的網頁狀態，有別於以往固定寬度的網頁布局。簡介如下： 流動布局（Fluid Grid） 流動布局 （ Fluid Grid ，又稱「液態布局」或「液態網格」）的原理， 前端工程師 在做 網頁設計 時，可將網頁的各種元素，以縮放、浮動的區塊來做配置，進而讓網頁中的各種元素，能隨著不同的瀏覽介面，而自動縮放大小以及調整排版。 例如，A 網頁中有兩個區塊可在電腦螢幕上並排展示，但在手機上因螢幕寬度太小而無法並排顯示時，後面的區塊就會自動排到前一個區塊的下方，所以不會產生水平卷軸 (Scrollbar)。 在流動布局中，寬度也常以百分比 (%) 為單位 (傳統的網頁常以像素 px 作為唯一單位)，因此可讓網頁能依照裝置的螢幕尺寸，自動依照比例進行調整，就如同液體會依照裝填容器不同而隨其變化形狀。   媒體查詢（Media Queries） 媒體查詢 （ Media Queries ）如字義所示，就是網頁會先「查詢（query)」「媒體 ( media )」的屬性，再針對這些屬性值而決定要給網頁什麼樣的樣式。簡單的說，就是針對你的裝置，給你不同的樣式設定。 在這些屬性包含設備類型、解析度、螢幕的尺寸等。在網頁上常用 媒體類型 (media-type) 的為 all (所有裝置)、screen (螢幕裝置)、print (印刷裝置) 等。而常見 媒體特徵 (Media Features) 有 min-width (最小寬度)、 max-width (最大寬度) 、resolution (解析度) 、 color (顏色) 等。 流動圖片 (Fluid Images) 因應 RWD 流動布局 的特性，其圖片的尺寸也必須更靈活的隨著裝置螢幕大小而伸縮自如，是為「 流動圖片 (Fl...

不管是前端工程師還是網頁設計師,了解整體網站的規畫都是非常重要的事,今天分享四個步驟讓你穩紮穩打! AWD 跟 RWD 的目的一致，都是希望能針對桌機、平板、手機等不同尺寸的裝置，而顯示出易於瀏覽的網站畫面。 在規劃網站時，相信有不少的 PM 在與 前端工程師 或是 網頁設計 師在溝通上遇到瓶頸，像是網站要使用 RWD 或是 AWD 等等。本篇就以未接觸過 網頁設計 、或是無任何技術背景的網頁規劃者為角度，講解 RWD 與 AWD 網站的差異，以及如何規劃與選擇。 讀完本系列文章後，你將會了解： (目錄) RWD 和 AWD 的差異與優缺點 我該選擇 RWD 還是 AWD ? AWD 要怎麼做才能對 SEO 無痛? 了解整體網站的規劃流程-PM與前端溝通更順利 與前端溝通更順利！從了解整體網站的規劃流程開始 無論是設計網站或是 APP 開發，合理的設計四個流程就是這四個：Sketch、 Wireframe、 Mockup、 Prototype。 #1 Sketch (草圖) 這個階段需要靠大家一起腦力激盪，只需要用筆和紙將腦中的想法粗略的勾勒出來-這也是最快得到靈感的方法。就算是粗糙不堪的草圖，也比文字更能夠表達、整合、具象化大家的想法，是在進入到 Wireframe (線框稿)之前的必備步驟。 需要工具 ：筆與紙 擬真度 ：最低 階段目標 ：溝通、整合大家的想法與創意 #2 Wireframe (線框稿) Wireframe (線框稿)階段的重點在於 釐清需求 與 確認網頁上一定會出現的功能 。所以必須先排除視覺元素的討論，單單專注在功能的規劃，以免失焦。 線框稿會以簡單的草稿圖，以低擬真度的方式呈現網頁上的主要資訊、排版與架構，以及如何與使用者互動等。通常設計師會使用 Balsamiq 提供的 Wireframe 工具、或是 powerpoint 、手繪等方式，以黑白的方格、線和圖來呈現不同的層級，其元素必須要非常精簡，是為了避免討論時失焦，加速效率和速度。某些還未確定的內容，就先利用方框或假文字來表示，例如圖片、影片與文字等等。 因此，在 Wireframe 階段不能出現過度的細節會比較好，比如說網頁的字型選用、 B...