December 2014
Intermediate to advanced
416 pages
5h 33m
Chinese
Content preview from Responsive Web Design 響應式網頁設計學習手冊
Become an O’Reilly member and get unlimited access to this title plus top books and audiobooks from O’Reilly and nearly 200 top publishers, thousands of courses curated by job role, 150+ live events each month,
O’Reilly covers everything we've got, with content to help us build a world-class technology community, upgrade the capabilities and competencies of our teams, and improve overall team performance as well as their engagement.I wanted to learn C and C++, but it didn't click for me until I picked up an O'Reilly book. When I went on the O’Reilly platform, I was astonished to find all the books there, plus live events and sandboxes so you could play around with the technology.I’ve been on the O’Reilly platform for more than eight years. I use a couple of learning platforms, but I'm on O'Reilly more than anybody else. When you're there, you start learning. I'm never disappointed.I'm always learning. So when I got on to O'Reilly, I was like a kid in a candy store. There are playlists. There are answers. There's on-demand training. It's worth its weight in gold, in terms of what it allows me to do.
118
|
響應式網頁設計學習手冊
圖 5-3 設計範圍 15 – 35 em 的例子
圖 5-3 設計範圍 36 – 200 em 的例子
當然，圖 5-3 和圖 5-4 的螢幕快照只描述每個設計範圍的一些點，
因為不可能在這裡涵蓋一切可能之視埠寬度的螢幕快照。
這就是為什麼響應式原型（responsive prototype，第 7 章會學到）在
設計過程中會如此有幫助的原因 — 你可以在瀏覽器裡開啟原型，並
且慢慢調整瀏覽器視窗的大小，看看我們的設計在每一種螢幕寬度
上的樣子。
隨著我們增加額外的媒體查詢到我們的範例中，它將為我們的設計
劃分出額外的範圍。
以響應式的做法進行設計
在開始為範例網站添加媒體查詢之前，我們需要討論一下組織響應
式網站的最佳方法。
漸進增強
漸進增強
（
progressive enhancement
）表示你從基礎開始，並且逐步
針對更多的瀏覽器和裝置做更多的加強。
你的預設設計（在媒體查詢之前）是針對最窄的螢幕，但是，它也
必須滿足大多數基礎裝置的需要 — 這些基礎裝置可能無法識別媒體
查詢、CSS3 或 JavaScript。
5. 媒體查詢
|
119
製作網站時，你從
內容
（
content
）開始，並且使用 HTML 賦予它語
義結構（semantic structure）。這是第一個分層，任何瀏覽器都能夠
讀取你的 HTML。
下一個分層是針對
表現
（
presentation
）。在表現層裡，你使用 CSS
決定一切將如何展現於頁面上︰配置，顏色，排版。有些瀏覽器不
支援你的所有 ...
Become an O’Reilly member and get unlimited access to this title plus top books and audiobooks from O’Reilly and nearly 200 top publishers, thousands of courses curated by job role, 150+ live events each month,
and much more.
Read now
Unlock full access
More than 5,000 organizations count on O’Reilly
O’Reilly covers everything we've got, with content to help us build a world-class technology community, upgrade the capabilities and competencies of our teams, and improve overall team performance as well as their engagement.Julian F.
I wanted to learn C and C++, but it didn't click for me until I picked up an O'Reilly book. When I went on the O’Reilly platform, I was astonished to find all the books there, plus live events and sandboxes so you could play around with the technology.Addison B.
I’ve been on the O’Reilly platform for more than eight years. I use a couple of learning platforms, but I'm on O'Reilly more than anybody else. When you're there, you start learning. I'm never disappointed.Amir M.
I'm always learning. So when I got on to O'Reilly, I was like a kid in a candy store. There are playlists. There are answers. There's on-demand training. It's worth its weight in gold, in terms of what it allows me to do.