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. 媒體查詢
|
123
先針對小螢幕作設計
當你使用媒體查詢根據不同視埠寬度改變你的網站設計時，通常會
從一個方向開始，不是先針對最窄的寬度產生預設設計，再為較寬
的視埠增加媒體查詢，就是從最寬的寬度開始，再為較小的視埠寬
度增加媒體查詢。
通常，先針對小螢幕進行設計會運作得比較好。即使你可能比較習
慣桌面尺寸的網站設計，但從最窄的螢幕寬度開始，會容易很多，
迫使你聚焦在內容上，並且只包含你實際需要的東西。
由小而大建立配置遠比由大而小來得容易。一旦針對狹窄的視埠建
立滿意的配置，你在較寬的視埠上會多出許多空間可以調配。然而，
如果你試著將桌面尺寸的網站塞入極小的螢幕 — 從「塞」這個字就
可以知道它的困難。
如果你去檢視我們當初離開第 4 章範例的地方，會看到我們的配置
在各種螢幕尺寸上的運作狀況，但以窄螢幕（如手機）看起來最好
（圖 5-7）。
我們會採用這個設計，並且增加媒體查詢，讓它在所有螢幕尺寸上
看起來都很好。
使用媒體查詢
中斷點是任意的，你的網站可以有任何你想要的數字，包括零。那
麼，要從哪裡開始？你的初始設計規劃會讓你瞭解你需要多少個中
斷點，但是你必須回歸到瀏覽器，找到最好的地方，增加媒體查詢，
那會將你的設計劃分成兩個設計範圍。
一開始，先從最窄寬度的瀏覽器裡檢視範例網站，然後再慢慢讓瀏
覽器視窗變寬，看看會發生什麼事。
124
|
響應式網頁設計學習手冊
圖 5-7 在窄螢幕上觀看範例網站，大約是手機的尺寸
兩欄配置
我們先聚焦在文章的區段，以及每一行的字元數（在第 10 章中，我
們會改變導覽以及頁面的其他部分） ...
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.