前端工程師在網頁設計的時候要注意一些事情,比如說媒體特性,但這是什麼呢?讓我們看下去!!
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 捲軸查看超過邊界的部分 |
其實 CSS
Media Query 對於許多
前端工程師來說並不複雜，大多數的情形其實都只是在應付
RWD響應式網頁需要注意螢幕尺寸的特性。也就是說，
網頁設計只需要注意 max-width、min-width 等視窗/網頁尺寸 (Viewport / Page Dimensions) 的 media features (就是本篇提到的這些屬性等) 就能處理各種裝置的狀況。至於其他的屬性 (請參考
此篇) 多是應付特殊的情形，如單色的螢幕、超過範圍的區塊等等。總而言之，對於撰寫一個
RWD響應式網頁，善用
Media Query 是必備的技能！ 本篇為「
前端工程師的基礎
RWD教學」系列文章第六篇，全系列文章如下:
推薦閱讀:
免費HTML5教學(上):網路行銷如虎添翼
免費HTML5教學(中):助SEO優化一臂之力
免費HTML5教學(下):各式標籤隨你標
厭世代正風行?來上Java課程可以幫你扭轉困境!
高薪像做夢?!Java課程讓你夢想成真!
信不信由你,因為Java課程讓我獲得我想要的生活!
還在為成為專業IT人煩惱?!選對Java課程讓你輕鬆到位!
留言列表
