Java瑪奇朵-非本科系的IT吃喝電玩日誌

人工智慧界貢獻滿滿的科技巨人Nils Nilsson日前離世,今天要來好好的介紹一番!!千萬不能錯過!!

(繼續閱讀...)

Java瑪奇朵 發表在 痞客邦 留言(0) 人氣()

前端工程師目前最熱門的概念課之一---RWD網頁概念!! 今天要來跟大家說明的是RWD網站和傳統網站的設計差異!!
在智慧型手機等行動上網的裝置普及之前，早期的前端工程師與網頁設計師在做網站和

UI,UX設計時較輕鬆。因為網站只需適應一種規格，在製作程序上對比今日的 RWD 網站顯得比較單純。製作程序差異如下：
從上圖可以看出，在開發 RWD 網站時，若要符合不同裝置 (就是電腦、手機與平板等) 的網頁需求，就要開發出 4-5 種版面，無論是在設計、或是撰寫程式上都比較費時且難以銜接。因此在流程的前半段，必須要規劃 Media Query 的尺寸斷點再去進行網頁設計、程式撰寫，再根據不同的尺寸斷點進行反覆測試、調整與修正。
(相關文章：Media Query使用方法、Media Query中的視窗與頁面尺寸媒體特性一覽表)。
在著手各種載具版面的設計前，應先根據與客戶討論後的結果，粗略進行各種載具的網頁框架規劃 (Wireframe)。Wireframe 是低保真度的設計原型，是在除去所有視覺設計細節 (如色彩、字型等) 之下，進行頁面架構、功能與內容的規劃，藉此更能集中地檢視整個介面流程和架構，方便與客戶溝通想法。
(相關文章：與前端溝通更順利！從了解整體網站的規劃流程開始)。
網頁框架規劃 (Wireframe) 是運用文字線條、方塊，把每個區塊所要呈現的內容表現出來。盡可能減少設計元素，以突顯網頁所呈現的介面、動線流程與階層，確認使用者體驗如何。有時為了在視覺上清除區隔不同區域，可以使用灰階色塊作補助。下圖為個人網站的 Wireframe 網頁框架範例。
本篇為「前端工程師必懂RWD概念」三部曲第一篇，全系列目錄如下:


(目錄)

1. RWD網頁與傳統網頁設計的差異


2. 內容優先的「優雅降級」與「漸進增強」


3. 行動載具的設計考量

 
 
其他閱讀
給前端工程師的火紅概念課(中):佈局斷點以設備為主還是內容為主
給前端工程師的火紅概念課(下):以行動裝置使用為優先考量
電腦不只會選花生,還會養蝦!!!! 人工智慧養出來的蝦還比較大隻呢!!
重新學習UI UX Python課程 打好基礎輕鬆領高薪
有一個傳說 來上Java課程還能任高薪職缺 媒合率竟高達百分之90
在苦惱履歷上技能要填什麼嗎? Java,UI課程等等證照幫你解決這個問題!!
 
程式課程選達內，美上市IT課程教育集團

(繼續閱讀...)

Java瑪奇朵 發表在 痞客邦 留言(0) 人氣()

Java瑪奇朵 發表在 痞客邦 留言(0) 人氣()

郭董發行人工智慧教科書,希望科技教育從高中做起!!積極培養年輕一代的人才~

(繼續閱讀...)

Java瑪奇朵 發表在 痞客邦 留言(0) 人氣()

Java瑪奇朵 發表在 痞客邦 留言(0) 人氣()

Java瑪奇朵 發表在 痞客邦 留言(0) 人氣()

今天的前端工程師RWD教學要來跟大家談談Media Query裡的and/not/only各是什麼意思~ 不要錯過嘍!!
 

【前文提要】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)。「媒體類型 (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. 兩者條件擇一即可 (與「or」連用)
如果兩種條件當中，符合一種即可套用此份 css 設定。這種兩者條件擇一即可的「or」條件式，需配合「,」使用：
範例：如果螢幕裝置寬度小於 700px「或」是直立的話，即可套用此份 css 設定：
@media screen and (max-width: 700px), (orientation: portrait) {
CSS設定
}
Media Query 之 not 使用方法
not 是用來排除某些設備的樣式，假使你希望這個樣式只在裝置 A 有作用，裝置 B 完全沒用，就可以使用 not。
範例：「除了」螢幕裝置寬度小於 300px 「之外」，橫向印刷時都會套用此份 css 設定：
@media not screen and (max-width:300px), print and (orientation: landscape){
CSS設定
}
Media Query 之 only 使用方法
only 可以指定「只有」某種裝置才能套用某些樣式，會寫在 media query 的字首。目前由於使用舊版裝置的人越來越少，所以使用 only 的寫法也越來越少見，直接採用 and 或 or 的寫法就能夠符合大多數的狀況。
以下的範例代表只有在「彩色螢幕」時才會套用 sample.css：
<link rel="stylesheet" media="only screen and (color)" href="sample.css" />
其實以上的範例也可以換成用「and」的寫法如下：
<link rel="stylesheet" media="screen and (color)" href="sample.css" />
Media Query 之 or 使用方法
or（或）就是在「多種條件當中只要符合一項就成立」的場合使用，在語法中，or 的寫法不直接寫「or」而是以逗號「,」表現。
範例：螢幕裝置若為直立「或」是寬度小於 380px 時，字體會變成藍色的 60px。
p{
font-size:30px;
}
@media (orientation: portrait), (max-width:380px){
p{
font-size:60px;
color:blue;
}
}
 
本篇為「前端工程師的基礎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

 
 
其他閱讀
前端工程師RWD教學:Media Type種類表格
前端工程師RWD教學:何謂RWD?
前端工程師RWD教學:流動布局原來是由這兩項技術組成的!!
著名企業皆投入AI領域,快報名Python課程幫自己在未來卡位吧!!
想學程式語言還只是在爬文? 別管網路上的達內教育評價了!! 親身體驗最準!!
最好剁手的屈臣氏利用大數據課程提升業績,你還在等什麼呢?
美國NASDAQ上市公司、外商IT教育培訓企業
 
 
 
 
 

(繼續閱讀...)

Java瑪奇朵 發表在 痞客邦 留言(0) 人氣()

Java瑪奇朵 發表在 痞客邦 留言(0) 人氣()

郭台銘積極打造全台第一本人工教育教科書,與全台學者共同培育台灣年輕人才!!

(繼續閱讀...)

Java瑪奇朵 發表在 痞客邦 留言(0) 人氣()

Java瑪奇朵 發表在 痞客邦 留言(0) 人氣()

Java瑪奇朵 發表在 痞客邦 留言(0) 人氣()

Java瑪奇朵 發表在 痞客邦 留言(0) 人氣()