目前分類:HTML5教學 (106)

瀏覽方式: 標題列表 簡短摘要

前端工程師寫不出RWD找不到工作! 關於RWD你必須要懂的八件事(七)

前端工程師寫不出RWD找不到工作! 關於RWD你必須要懂的八件事(七)

文章標籤

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

前端工程師需要掌握非常多的語法及設定,讓我們繼續探討Media Query的其中技巧!!

前端工程師需要掌握非常多的語法及設定,讓我們繼續探討Media Query的其中技巧!!

文章標籤

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

前端工程師寫不出RWD找不到工作! 關於RWD你必須要懂的八件事(六)

前端工程師寫不出RWD找不到工作! 關於RWD你必須要懂的八件事(六)

文章標籤

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

前端工程師寫不出RWD找不到工作! 關於RWD你必須要懂的八件事(五)

前端工程師寫不出RWD找不到工作! 關於RWD你必須要懂的八件事(五)

文章標籤

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

前端工程師在網頁設計的時候要注意一些事情,比如說媒體特性,但這是什麼呢?讓我們看下去!!

前端工程師在網頁設計的時候要注意一些事情,比如說媒體特性,但這是什麼呢?讓我們看下去!!

【前文提要】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)」與「and/not/only判斷條件」已在本系列的前網頁設計文章做說明,此篇就針對媒體特徵 (Media Feature) 的視窗或頁面尺寸類 (Viewport/Page Dimensions) 與顯示品質 (Display Quality) 屬性做說明。而至於「顏色類」和「互動類」的屬性則於此篇文章做說明。

Media Features 媒體特性 - 視窗與頁面尺寸 (Viewport/Page Dimensions)

媒體特徵 說明
device-height 裝置螢幕高度
max-device-height 裝置螢幕高度小於或等於...
min-device-height 裝置螢幕高度大於或等於...
device-width 裝置螢幕寬度
max-device-width 裝置螢幕寬度小於或等於...
min-device-width 裝置螢幕寬度大於或等於...
height 視窗高度
max-height 視窗高度小於或等於...
min-height 視窗高度大於或等於...
width 視窗寬度
max-width 視窗寬度小於或等於...
min-width 視窗寬度大於或等於...
orientation 螢幕旋轉方向,可設定 portrait ( 直向 ) 與 landscape ( 橫向 )
aspect-ratio 螢幕長寬比例,寫法格式為 「長/寬」,如 1680/720。 可寫成 max-aspect-ratio (最大長寬比) 或 min-aspect-ratio (最小長寬比)
 

Media Features 媒體特性 - 顯示品質 (Display Quality)

媒體特徵 說明
resolution 解析度,單位為 dpi、ppx 等 字首加「max-」為 max-resolution (最大解析度) 字首加「min-」為 min-resolution (最小解析度)
scan 顯示器掃描線的方式,有兩個選項:interlace 和 progressive。 其值等同於 1080i 和 1080p 的字尾英文意思: interlace 為奇數偶數掃描線交錯的方式,progressive 為漸進式掃描,是現在大多數電視採用的方式 )
update 媒體更新,有三個選項:none、slow 和 fast none 表示無法更新的裝置,如印出來的文件 slow 表示更新速度慢的顯示裝置,如亞馬遜 Kindle 等裝置 fast 表示更新速度快的裝置,如電腦螢幕
overflow-block 區塊溢出 當區塊元素 ( 如 &ltdiv&gt 、&ltp&gt、&lth1&gt-&lth6&gt、&lttable&gt 等 ) 超過邊界範圍時用,有四個選項介紹如下: overflow-block: none:超過邊界的部分就不顯示 overflow-block: scroll:可使用 scroll 捲軸查看超過邊界的部分 overflow-block: paged:超出的內容會顯示在下一頁 overflow-block: optional-paged:可滾動查看超出範圍,且可手動設定超出的內容要從哪裡從哪裡開始在下一頁顯示 (如使用 break-inside 指令)。
overflow-inline: scroll 行內溢出 當行內元素 ( 如 &ltbr&gt 、&ltimg&gt、&ltstrong&gt 等) 超過邊界範圍時用,有二個選項介紹如下: overflow-block: none:超過邊界的部分就不顯示 overflow-block: scroll:可使用 scroll 捲軸查看超過邊界的部分
其實 CSS Media Query 對於許多前端工程師來說並不複雜,大多數的情形其實都只是在應付 RWD響應式網頁需要注意螢幕尺寸的特性。也就是說,網頁設計只需要注意 max-width、min-width 等視窗/網頁尺寸 (Viewport / Page Dimensions) 的 media features (就是本篇提到的這些屬性等) 就能處理各種裝置的狀況。至於其他的屬性 (請參考此篇) 多是應付特殊的情形,如單色的螢幕、超過範圍的區塊等等。總而言之,對於撰寫一個 RWD響應式網頁,善用 Media Query 是必備的技能! 本篇為「前端工程師的基礎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

推薦閱讀:

文章標籤

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

前端工程師的操作技術也跟英文連接詞有關係?太神奇了傑克,到底是怎麼一回事?

前端工程師的操作技術也跟英文連接詞有關係?太神奇了傑克,到底是怎麼一回事? ​

文章標籤

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

前端工程師寫不出RWD找不到工作! 關於RWD你必須要懂的八件事(三)

文章標籤

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

前端工程師寫不出RWD找不到工作! 關於RWD你必須要懂的八件事(二)

文章標籤

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

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

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

文章標籤

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

前端工程師寫不出RWD找不到工作! 關於RWD你必須要懂的八件事(一)

前端工程師寫不出RWD找不到工作! 關於RWD你必須要懂的八件事(一)

文章標籤

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

前端工程師總是有很多輔助的小語法讓網頁設計更順利,現在我們就透過資深工程師的分享來看看到底我們錯過了什麼!!

前端工程師總是有很多輔助的小語法讓網頁設計更順利,現在我們就透過資深工程師的分享來看看到底我們錯過了什麼!!

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

前端工程師在製作 RWD 響應式網頁時,一定會需要 CSS 語法就是 Media Query。簡單來說,我們可以把 Media 看成HTML5 與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. 上面的功能,若使用 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. 前端工程師的基礎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

推薦閱讀:

文章標籤

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

前端工程師怎麼有效地去進行SEO呢?其中還是有不少小技巧以及輔助的語法,到底怎麼做?就替大家揭曉!!

前端工程師怎麼有效地去進行SEO呢?其中還是有不少小技巧以及輔助的語法,到底怎麼做?就替大家揭曉!!

文章標籤

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

前端工程師所學範圍之大,讓我們一步一步來分析及學習這些小技能吧!!

前端工程師所學範圍之大,讓我們一步一步來分析及學習這些小技能吧!!

文章標籤

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

 我們認識了前端工程師後也想知道後端工程師是什麼!!就讓我們看下去,前端工程師與後端工程師的不同!!

 我們認識了前端工程師後也想知道後端工程師是什麼!!就讓我們看下去,前端工程師與後端工程師的不同!!

文章標籤

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

想成為前端工程師難嗎?讓我們帶領您走過條條康莊大道吧!!

想成為前端工程師難嗎?讓我們帶領您走過條條康莊大道吧!!

文章標籤

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

本篇介紹前端工程師如何用不同方式呈現背景固定模式!

 

文章標籤

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

成為前端工程師的點滴,讓我們一步一步地引導您!!

成為前端工程師的點滴,讓我們一步一步地引導您!!

文章標籤

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

想當前端工程師像蹲馬步一樣,要一步一步來!!我們來看看如何應用:背景重複設定

想當前端工程師像蹲馬步一樣,要一步一步來!!我們來看看如何應用:背景重複設定

文章標籤

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

前端工程師結束了背景圖案設定後,接著看圖樣設定!!

前端工程師結束了背景圖案設定後,接著看圖樣設定!!

文章標籤

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

前端工程師若想使背景重複顯示,有以下這四種參數可以使用:

 

文章標籤

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