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.
170
|
響應式網頁設計學習手冊
如果裝置條件改變，圖像可以動態被替換。例如，假如你旋轉平板
螢幕讓視埠寬度改變，瀏覽器將檢查它是否需要從
srcset
下載不同
的圖像。
注意，你能夠以最大視埠寬度指定圖像（如本例中的
600w
），這跟
max-width
媒體查詢具有相同的效果（
如果視埠寬度不超過
600
像
素
，
就使用這幅圖像
）。令人遺憾地，
srcset
只能使用最大寬度，
不能使用最小寬度。
不支援
srcset
的較老舊瀏覽器會忽略其他選項，並且使用
src
屬性
裡的預設圖像。
<picture>
就像
srcset
一樣，
<picture>
元素讓你指定及上傳相同圖像的多個
版本，瀏覽器只會下載它需要的特定檔案，而不是全部︰
<picture>
<source media="(min-width: 45em)" src="images/ower-large.
jpg">
<source media="(min-width: 18em)" src="images/ower-medium.
jpg">
<source src="ower-small.jpg">
<img src="images/ower-small.jpg" alt="a ower">
</picture>
在這個例子中，你可以看到
media
屬性使用的語法非常類似於 CSS
媒體查詢，你可以查詢
min-width
或
max-width
。
對 45 em 或更寬的視埠來說，瀏覽器將使用第 1 個
<source>
，
ower-large.jpg
。對 18 em 或更寬，但少於 45 em 的視埠來說，瀏覽
器將使用
ower-medium.jpg
。對其他視埠來說（少於 18 em），瀏覽
器會使用第
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.