Chapter 1 什麼是響應式網頁設計?

Size: px

Start display at page:

Download "Chapter 1 什麼是響應式網頁設計?"

臣暨
5 years ago
Views:

1 Chapter 1 什麼是響應式網頁設計?

2 2 RWD 002 Android WordPress breakpoints RWD HTML CSS Ethan Marcotte A List Apart Responsive Web Design

Chapter 1 003 什麼是響應式網頁設計 3 其餘正如它們所說的是歷史行動電話已是現在的社會不可或缺的一部分人們利用手機做越來越多的事情現在我們將討論執行 RWD 和自適應最關鍵的部分斷點斷點和媒體查詢斷點和媒體查詢 media queries 是讓我們透過 CSS 告訴瀏覽器該在什麼時候因為螢幕尺寸而調整我們的設計

3 Chapter 什麼是響應式網頁設計 3 其餘正如它們所說的是歷史行動電話已是現在的社會不可或缺的一部分人們利用手機做越來越多的事情現在我們將討論執行 RWD 和自適應最關鍵的部分斷點斷點和媒體查詢斷點和媒體查詢 media queries 是讓我們透過 CSS 告訴瀏覽器該在什麼時候因為螢幕尺寸而調整我們的設計媒體查詢不是一個新技術它們已存在相當長的時間並支援大多數的瀏覽器如圖 1.1 開發人員可以根據特定的條件將媒體查詢應用至 CSS 例如螢幕或列印或根據瀏覽器寬度斷點是由開發人員決定的瀏覽器寬度被設定斷點的版面會被改變例如 1024px 可視為一個斷點圖 1.1 支援媒體查詢的瀏覽器版本由 caniuse. com 提供

8 iphone 5 HTC 8.x Windows Phone Kindle Fire StatCounter 14 1.

4 8 iphone 5 HTC 8.x Windows Phone Kindle Fire StatCounter StatCounter [ rwdwp.com/4] RWD RWD

10 010 行動版優先 Luke Wroblewskiy Mobile First UI Mac ImageOptim http://rwdwp.

5 行動版優先 Luke Wroblewskiy Mobile First UI Mac ImageOptim PC RIOT com/ ImageOptim 10% Philip J. Casabona JavaScript gzip

16 開始我們的網站開始我們的網站現在我們將開始介紹我們在這本書用實作到的一個網站它是一個太空旅行的機構叫做 Millennium Flights 在書中我們會用 HTML/ CSS 將這個網站轉換成自適應的 WordPress 佈景主題圖 2.2 這是多麼有趣的事圖 2.

6 16 開始我們的網站開始我們的網站現在我們將開始介紹我們在這本書用實作到的一個網站它是一個太空旅行的機構叫做 Millennium Flights 在書中我們會用 HTML/ CSS 將這個網站轉換成自適應的 WordPress 佈景主題圖 2.2 這是多麼有趣的事圖 2.2 Millennium Flights 將成為 WordPress 的佈景主題佈景主題的架構開發佈景主題被當作是 WordPress 網站設計的概括名詞時會建立獨立的範本用來控制顯示網站的某個部分像是文章頁面 CPT... 等在 WordPress 的架構下這些範本會依照檔案命名的方式顯示對應的內容如果佈景主題裡沒有其他的範本只要有 index. 016

7 22 home.php index.php home.php WordPress front-page.php WordPress front-page.php 1. front-page.php 2. WordPress 3. WordPress > 4. front-page.php WordPress WordPress

8 46 wp_enqueue_script() IE8 046 HTML header.php <!DOCTYPE html> <html lang="en-us"> <head> <title><?php bloginfo('name');?> <?php wp_title();?> </title> <link rel="stylesheet" href="<?php bloginfo('stylesheet_url');?>" type="text/css" media="screen" /> <link rel="pingback" href="<?php bloginfo('pingback_url');?>" /> <?php wp_head();?> </head> <body> <div id="wrapper"> <header class="group"> <h1><img src="<?php print IMAGES;?>/logo.png" alt="<?php bloginfo('name');?>" /> <?php bloginfo('name');?></h1> <nav id="main"> <?php wp_nav_menu( array('menu' => 'Main' ));?> </nav> </header> <div id="content" class="group"> WordPress CSS classes

9 Chapter WordPress CSS Classes WordPress CSS body_class() post_class() WordPress.entry-content img,.alignleft, img.alignleft,.alignright, img.alignright,.aligncenter, img. aligncenter,.alignnone, img.alignnone,.wp-caption,.wp-caption img,.wp-caption, p.wp-caption- text,.wp-smiley,.gallery dl,.gallery dt,.gallery dd,.gallery dl a,.gallery dl img,.gallerycaption,.size-full,.size-large,.size-medium,.size-thumbnail..alignleft.alignright.alignleft, img.alignleft { display: inline; float: left; text-align: left; margin: 0 1% 0 0; }.alignright, img.alignright { display: inline; float: right; text-align: right; margin: %; } WordPress

10 50 WordPress CSS Classes }.wp-caption p.wp-caption-text { font-size: 0.85em; line-height: 1.1em; padding: 0 0.4em 0.4em; margin: 0; } 050.alignleft.alignright 40% 40% WordPress 迴響和小工具 WordPress 4 WordPress 3.2

Chapter 3 讓你的主題自適應基礎篇 051 51 圖 3.2 迴響會自動產生一些樣式方便讓使用者操控設定如上圖所示有很多與迴響相關的樣式而這只是部分清單而已最好的方法是知道有哪些樣式可以操控所有樣式如下所示.

11 Chapter 3 讓你的主題自適應基礎篇圖 3.2 迴響會自動產生一些樣式方便讓使用者操控設定如上圖所示有很多與迴響相關的樣式而這只是部分清單而已最好的方法是知道有哪些樣式可以操控所有樣式如下所示.reply {}.reply a {}.alt {}.odd {}.even {}.thread-alt {}.thread-odd {}.thread-even {} li ul.children.alt {} li ul.children.odd {}

64 4.5 WordPress HTML 064 <select onchange="location=this.options[this.selectedindex]. value;"> <option value="" selected="selected">go to.

12 WordPress HTML 064 <select onchange="location=this.options[this.selectedindex]. value;"> <option value="" selected="selected">go to...</option> <option value="/home/">home</option> <option value="/about/">about</option> <option value="/destinations/">destinations</option> <option value="/contact/">contact</option> </select> WordPress WordPress Walker_Nav_Menu Walker HTML Select_ Nav_Walker.php Walker_Nav_Menu class Select_Nav_Walker extends Walker_Nav_Menu { } public function start_lvl(&$output, $depth){} public function end_lvl(&$output, $depth){} public function start_el(&$output, $item, $depth, $args){} public function end_el(&$output, $item, $depth){} start_lvl end_lvl <ul> </ul> <select>

Chapter V.S. PC

Chapter V.S. PC Chapter 14 14-1 V.S. PC 14-2 14-3 14-4 14-1 V.S. PC PC PC Yahoo! PC (https://tw.yahoo.com/) Yahoo! (https:// tw.mobi.yahoo.com/) Yahoo! a b a PC b PC PC Flash HTML5 CSS3 PC 14-2 14-3 PC PC Yahoo! PC https://tw.yahoo.com/

Chapter 1 什麼是響應式 網頁設計?

Chapter 1 什麼是響應式網頁設計?