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/ Yahoo! https://tw.mobi.yahoo.com/ PC (RWD Responsive Web Design) ( ) PC W3C ( ) ( ) ( ) (One Web) (One URL) ( ) 14-6
回應式網頁設計 14 ( ) ( ) CSS (Media Query) CSS3 01 ~ 03 ( ) 05 ~ 07 600 ~ 979 ( ) 09 ~ 11 599 ( ) 01:@media screen{ 02: div {columns:3} 03:} 04: 05:@media screen and (min-width:600px) and (max-width:979px){ 06: div {columns:2} 07:} 08: 09:@media screen and (max-width:599px){ 10: div {columns:1} 11:} 14-7
width="100%" 100% PC <div> <img src="piece1.jpg" width="100%"> <p> </p> </div> a b a ( PC ) b ( ) (Liguid Layout) 01 ( ) pc.css 02 600 ~ 979 ( ) tab.css 03 599 ( ) phone.css 01:<link rel="stylesheet" type="text/css" href="pc.css" media="screen"> 02:<link rel="stylesheet" type="text/css" href="tab.css" media="screen and (min-width:600px) and (max-width:979px)"> 03:<link rel="stylesheet" type="text/css" href="phone.css" media="screen and (max-width:599px)"> 14-8
回應式網頁設計 14 14-4 回應式網頁設計的實例 在本節中 我們將透過下面的例子為您示範回應式網頁設計 圖 ( 一 ) 為大尺 寸 瀏覽器寬度在 980px 以上 版面會完整顯示 圖 ( 二 ) 為中尺寸 瀏覽器 寬度在 600 ~ 979px 版面會按比例縮小 圖 ( 三 ) 為小尺寸 瀏覽器寬度在 599px 以內 版面會變成單欄 圖(一) 圖(二) 圖(三) 14-9
14-4-1 viewport viewport viewport ios Android 3.X viewport 980 viewport viewport ( ) ( ) ipad Air ipad Mini ipad Air (1536 2048) ipad Mini (768 1024) ipad Air ( ) ( ) density ( ) ipad Mini PPI (Pixels Per Inch) 163 163 density 1 ipad Air PPI 326 density 326 163=2 14-10
回應式網頁設計 14 density viewport density ipad Air ipad Mini 9.7 7.9 1536 2048 768 1024 density 2 1 viewport 768 1024 ipad Air ipad Mini ( ) ( ) ( ) ( ) iphone 3.5 320 480 163 1 320 480 iphone 4 3.5 640 960 326 2 320 480 iphone 5 4 640 1136 326 2 320 568 iphone 6 4.7 750 1334 326 2 375 667 iphone 6 Plus 5.5 1080 1920 401 2.5 414 736 ipad Air 9.7 1536 2048 326 2 768 1024 ipad Mini 7.9 768 1024 163 1 768 1024 14-11
density viewport HTML 06 <meta> viewport 01:<!doctype html> 02:<html> 03: <head> 04: <meta charset="utf-8"> 05: <title>rwd</title> 06: <meta name="viewport" content="width=device-width"> 07: </head> 08: <body> 09: </body> 10:</html> 14-4-2 CSS3 07 ( ) pc.css 08 600 ~ 979 ( ) tab.css 09 599 ( ) phone.css 01:<!doctype html> 02:<html> 03: <head> 04: <meta charset="utf-8"> 05: <title>rwd</title> 06: <meta name="viewport" content="width=device-width"> 07: <link rel="stylesheet" type="text/css" href="pc.css" media="screen"> 08: <link rel="stylesheet" type="text/css" href="tab.css" media="screen and (min-width:600px) and (max-width:979px)"> 09: <link rel="stylesheet" type="text/css" href="phone.css" media="screen and (max-width:599px)"> 10: </head> 11: <body> 12: </body> 13:</html> 14-12
回應式網頁設計 14 14-4-3 980 600 980 PC 600 ~ 979 599 PC PC 20px 980-20*2=940px 980px a b c d e a (container 940px ) b (header 10px) c (article 600px 20px) d (aside 320px 20px) e (footer ) 14-13
HTML <boby> <body> <div id="container"> <header>... </header> <article>... </article> <aside>... </aside> <footer>... </footer> </div> </body> <\Ch14\RWD1.html> PC pc.css 01:body {margin:20px} 02: 03:#container {width:940px; margin:auto} 04: 05:header {display:block; clear:both; margin:0 0 10px} 06: 07:footer {display:block; clear:both; text-align:left; background:linear-gradient(to bottom, lightblue, white)} 08: 09:article {float:left; width:600px; margin:0 0 20px} 10: 11:aside {float:right; width:320px; margin:0 0 20px; border:solid 1px lightgray; border-radius:10px} <\Ch14\pc.css> 14-14
回應式網頁設計 14 01 20px 03 980-20*2=940px 980px 05 10px 07 09 600px 20px 11 320px 20px PC 100% 600/940 64% 320/940 34% a b c a ( 100%) b ( 64%) c ( 34%) 14-15
tab.css 01:#container {width:100%} 02:article {width:64%} 03:aside {width:34%} 04:img {width:100%; height:auto} <\Ch14\tab.css> 01 PC 100% 02 600/940 64% 03 320/940 34% 04 100% PC 100% a b c a ( 100%) b ( 100%) c ( 100%) 14-16
回應式網頁設計 14 phone.css 01:#container {width:100%} 02:article {float:none; width:100%} 03:aside {float:none; width:100%} 04:img {width:100%; height:auto} <\Ch14\phone.css> 01 PC 100% 02 100% 03 100% 04 100% 14-4-4 01:<!doctype html> 02:<html> 03: <head> 04: <meta charset="utf-8"> 05: <title>rwd</title> 06: <meta name="viewport" content="width=device-width"> 07: <link rel="stylesheet" type="text/css" href="pc.css" media="screen"> 08: <link rel="stylesheet" type="text/css" href="tab.css" media="screen and (min-width:600px) and (max-width:979px)"> 09: <link rel="stylesheet" type="text/css" href="phone.css" media="screen and (max-width:599px)"> 10: </head> 11: <body> 12: <div id="container"> 13: <header> 14: <img src="img1.jpg"> 15: <nav id="items"> <\Ch14\RWD1.html> ( 1/2) 14-17
16: <ul> 17: <li><a href="item1.html"> </a></li> 18: <li><a href="item2.html"> </a></li> 19: <li><a href="item3.html"> </a></li> 20: <li><a href="item4.html"> </a></li> 21: </ul> 22: </nav> 23: </header> 24: 25: <article> 26: <p> 3000 </p> 27: <img src="img2.jpg"> 28: </article> 29: 30: <aside> 31: <h3> </h3> 32: <nav id="travels"> 33: <ul> 34: <li><a href="travel1.html"> </a></li> 35: <li><a href="travel2.html"> </a></li> 36: <li><a href="travel3.html"> </a></li> 37: <li><a href="travel4.html"> </a></li> 38: <li><a href="travel4.html"> </a></li> 39: </ul> 40: </nav> 41: </aside> 42: 43: <footer> 44: <p> <br> 45: 220 1 <br> 0800-000-001<br> 46: </p> 47: </footer> 48: </div> 49: </body> 50:</html> <\Ch14\RWD1.html> ( 2/2) 14-18
回應式網頁設計 14 13 ~ 23 img1.jpg pc.css 25 ~ 28 img2.jpg 30 ~ 41 43 ~ 47 pc.css 07 ~ 10 tab.css phone.css 01:body {margin:20px} 02:#container {width:940px; margin:auto} 03:header {display:block; clear:both; margin:0 0 10px} 04:footer {display:block; clear:both; text-align:left; background:linear-gradient(to bottom, lightblue, white)} 05:article {float:left; width:600px; margin:0 0 20px} 06:aside {float:right; width:320px; margin:0 0 20px; border:solid 1px lightgray; border-radius:10px} 07:#items {background-color:lightblue; overflow:hidden} 08:#items ul {margin:0px} 09:#items li {list-style-type:none; float:left} 10:#items li a {display:block; width:60px; height:30px; color:black; border-right:1px white solid; text-decoration:none; text-align:center; padding:10px 0px 0px} <\Ch14\pc.css> 01:#container {width:100%} 02:article {width:64%} 03:aside {width:34%} 04:img {width:100%; height:auto} <\Ch14\tab.css> 01:#container {width:100%} 02:article {float:none; width:100%} 03:aside {float:none; width:100%} 04:img {width:100%; height:auto} <\Ch14\phone.css> 14-19
PC a b a b 14-20