翻譯不完整。請協助 翻譯此英文文件

響應式設計(適應性設計)網路 app 使用到如媒體查詢與視口(media query and viewport)的技術,以確保用戶介面能夠適應任何設備:桌機、手機、平板、或未來的任何設備。

核心指引

The building blocks of responsive design
了解響應式設計的基本觀念、以及當代 app 布局的必要重點。
手機優先
在建立響應式設計布局時,先預設是手機布局、再慢慢構建更螢幕更寬的布局才有道理。

技術

技術 敘述 支援概要 最新規範
媒體查詢 允許根據視口大小、解析度、方向……等,選擇性應用於內容樣式的表達式。 廣泛普及於各大現代瀏覽器(更多資訊 Media Queries Level 4
@viewport/viewport meta tag 主要用於控制 viewport 設定。 @viewport:實驗性質(相關資訊
Viewport meta tag:當今主流的手機瀏覽器都支援。
CSS Device Adaptation Module Level 1
Flexbox 好用的 CSS 功能,能建立靈活的響應式版面。 當今主流瀏覽器都支援(相關資訊 CSS Flexible Box Layout Module Level 1

工具

Modernizr
基於功能檢測的 JavaScript 函式庫。能針對支持的功能不同,套用不同的 CSS 與 JS。
css3-mediaqueries-js
針對較老舊 IE(5+) 添加 Media Query 支援的 JavaScript polyfill。

參見

Graphics for responsive sites
Ideas to keep in mind when designing graphics for responsive sites and applications.
Responsive navigation patterns
How do you make a UI that looks and works as great on a smartphone as it does on the desktop? Learn how to design UIs that change to fit your user's screen.

文件標籤與貢獻者

 此頁面的貢獻者: iigmir
 最近更新: iigmir,