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.
5. 媒體查詢
|
133
總結
媒體查詢讓你根據裝置（網站在上頭被觀看）的特徵，應用不同的
樣式宣告。這是響應式設計的關鍵部分，讓使用者根據視埠尺寸看
到網站的不同配置或設計。
雖然強大，但媒體查詢實際上非常簡單。你先從關於裝置的問題
開始，稱作表達式（expression）。假如表達式為真，媒體查詢裡的
CSS 被應用。如果表達式為假，媒體查詢裡的 CSS 被忽略。
透過使用媒體查詢，你會從應用到網站的特定樣式的預設值開始，
但根據視埠寬度使用不同的值覆寫該值。
媒體查詢可以直接被包含在樣式表裡，但也能夠被用來連結獨立的
樣式表，在這種情況下，整個樣式表只有在媒體查詢為真時才會被
應用於頁面。
在響應式設計中，媒體查詢通常只用來查詢視埠寬度，視埠是瀏覽
器視窗中包含網頁的部分。視埠在桌上型電腦與筆電上是可變的，
因為使用者能夠改變瀏覽器視窗的大小。在行動裝置上，視埠寬度
固定不變；與螢幕寬度相同。
其他媒體特徵也可以被詢問，例如，定向、寬高比和解析度，但並
不是所有主要瀏覽器都一致地支援這些特徵，目前不常被使用。無
論如何，這種情況在將來可能會改變。視埠寬度的媒體查詢受到全
部主要瀏覽器的支援，除了 IE 8 及更老舊的版本之外，這個問題需
要利用條件式註解，或者使用補充支援（polyfill）才能夠解決。
中斷點是媒體查詢中的數值點，參照到設計會被劃分成兩種變形的
視埠寬度。設計範圍是二個中斷點之間的空間︰每一種變形所屬的
視埠寬度範圍。
為你的網站添加媒體查詢時，最容易的方式是從最小的螢幕寬度開
始，再利用漸進增強的方式逐步處理更大的螢幕和裝置。網格被用
來賦予你的配置更大的凝聚力，而不管螢幕尺寸是什麼。
134
|
響應式網頁設計學習手冊
在選擇中斷點時，不要挑選剛好匹配常見裝置的點，而是要確認常
見裝置的寬度在你的設計範圍之一當中適應得很好 ...
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.