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.
3. 響應式網站的 HTML
|
47
圖 3-2 Wisconsin 大學的整個網站以桌面尺寸的形式被展示在手機上，迫使使用者
必須把鏡頭拉近（放大）才能夠閱讀上面的文字
在圖 3-3 中，你看到
Boston Globe
的首頁被展示在 iPhone 螢幕上，
在圖 3-4 中，你看到相同網站被展示在 iPad 螢幕上，該網站在兩個
螢幕上都能夠以全尺寸的方式被展示，然而它們的實體寬度並不一樣。
圖 3-3 Boston Globe 網站以全尺寸的方式被展示在 iPhone 上
48
|
響應式網頁設計學習手冊
通常，你應該為響應式網站設定視埠如下︰
<meta name="viewport" content="width=device-width, initial-
scale=1">
寬度
width 屬性告訴瀏覽器如何縮放網頁。
對響應式網站來說，
width=device-width
的值叫瀏覽器以全尺寸的
方式展示頁面，不管該尺寸可能是什麼，瀏覽器展示該頁面，讓視
埠寬度是實際的裝置寬度（亦即，100%）。
圖 3-4 Boston Globe 網站以全尺寸的方式被展示在 iPad 上
如果裝置寬度未被指定在
viewport
中介屬性中，裝置將使用它自
己的預設視埠設定來展示頁面。例如 ...
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.