前端工程師寫不出RWD找不到工作! 關於RWD你必須要懂的八件事(七)
目前分類：HTML5教學 (106)
- May 07 Tue 2019 17:24
前端工程師必學的RWD八堂課(七)
- May 06 Mon 2019 23:38
前端工程師不藏私大公開(五):媒體特性的箇中秘密!!
- May 06 Mon 2019 23:36
前端工程師必學的RWD八堂課(六)
前端工程師寫不出RWD找不到工作! 關於RWD你必須要懂的八件事(六)
- May 03 Fri 2019 23:06
前端工程師必學的RWD八堂課(五) | 判斷條件
前端工程師寫不出RWD找不到工作! 關於RWD你必須要懂的八件事(五)
- May 03 Fri 2019 21:38
前端工程師不藏私大公開(四):什麼是媒體特性?
| 【前文提要】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 區塊溢出 | 當區塊元素 ( 如 <div> 、<p>、<h1>-<h6>、<table> 等 ) 超過邊界範圍時用，有四個選項介紹如下： overflow-block: none：超過邊界的部分就不顯示 overflow-block: scroll：可使用 scroll 捲軸查看超過邊界的部分 overflow-block: paged：超出的內容會顯示在下一頁 overflow-block: optional-paged：可滾動查看超出範圍，且可手動設定超出的內容要從哪裡從哪裡開始在下一頁顯示 (如使用 break-inside 指令)。 |
| overflow-inline: scroll 行內溢出 | 當行內元素 ( 如 <br> 、<img>、<strong> 等) 超過邊界範圍時用，有二個選項介紹如下： overflow-block: none：超過邊界的部分就不顯示 overflow-block: scroll：可使用 scroll 捲軸查看超過邊界的部分 |
推薦閱讀:
- May 02 Thu 2019 21:09
前端工程師不藏私大公開(三):怎麼運用or.and.only?
前端工程師的操作技術也跟英文連接詞有關係?太神奇了傑克,到底是怎麼一回事?
- May 01 Wed 2019 21:38
前端工程師必學的RWD八堂課(三) | Media Query
前端工程師寫不出RWD找不到工作! 關於RWD你必須要懂的八件事(三)
- Apr 30 Tue 2019 21:25
前端工程師必學的RWD八堂課(二) | 流動佈局
前端工程師寫不出RWD找不到工作! 關於RWD你必須要懂的八件事(二)
- Apr 30 Tue 2019 12:41
前端工程師不藏私大公開(二):關於Media Queries
前端工程師關於Media Queries的分享,就讓我們先來認識認識這個新朋友吧!!
- Apr 29 Mon 2019 20:32
前端工程師必學的RWD八堂課(一) | 為什麼你必須懂RWD?
- Apr 29 Mon 2019 11:51
前端工程師不藏私大公開(一):怎麼運用Media Query?
前端工程師總是有很多輔助的小語法讓網頁設計更順利,現在我們就透過資深工程師的分享來看看到底我們錯過了什麼!!
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教學」系列文章第三篇，全系列文章如下:
推薦閱讀:
- Apr 23 Tue 2019 21:36
前端工程師的選擇障礙?AWD 跟 RWD 到底哪個好!!!
前端工程師怎麼有效地去進行SEO呢?其中還是有不少小技巧以及輔助的語法,到底怎麼做?就替大家揭曉!!
- Apr 03 Wed 2019 22:13
前端工程師就得知道的?
前端工程師所學範圍之大,讓我們一步一步來分析及學習這些小技能吧!!
- Apr 01 Mon 2019 21:32
前端工程師和後端工程師的不同?
- Mar 29 Fri 2019 01:23
前端工程師的入場卷:CSS背景位置設定
想成為前端工程師難嗎?讓我們帶領您走過條條康莊大道吧!!
- Mar 28 Thu 2019 04:45
前端工程師CSS初級班-背景固定模式設定
本篇介紹前端工程師如何用不同方式呈現背景固定模式!
- Mar 28 Thu 2019 00:06
前端工程師學習基礎:CSS background-attachment
- Mar 27 Wed 2019 06:57
前端工程師向上躍升: 背景重複顯示設定
- Mar 27 Wed 2019 06:38
前端工程師CSS背景圖案設定
前端工程師結束了背景圖案設定後,接著看圖樣設定!!
- Mar 27 Wed 2019 04:19
前端工程師的基本功-CSS 背景重複顯示設定
