Chapter V.S. PC

Size: px

Start display at page:

Download "Chapter V.S. PC"

班崎诸葛
6 years ago
Views:

1 Chapter V.S. PC

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

3 14-3 PC PC Yahoo! PC Yahoo! PC (RWD Responsive Web Design) ( ) PC W3C ( ) ( ) ( ) (One Web) (One URL) ( ) 14-6

回應式網頁設計 14 ( ) ( ) CSS (Media Query) CSS3 01 ~ 03 ( ) 05 ~ 07 600 ~ 979 (

screen and (min-width:600px) and (max-width:979px){ 06: div {columns:2}

4 回應式網頁設計 14 ( ) ( ) CSS (Media Query) CSS3 01 ~ 03 ( ) 05 ~ ~ 979 ( ) 09 ~ ( ) 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

css 03 599 ( ) phone.css 01:<link rel="stylesheet" type="text/css" href="pc.

5 width="100%" 100% PC <div> <img src="piece1.jpg" width="100%"> <p> </p> </div> a b a ( PC ) b ( ) (Liguid Layout) 01 ( ) pc.css ~ 979 ( ) tab.css ( ) 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

6 回應式網頁設計回應式網頁設計的實例在本節中我們將透過下面的例子為您示範回應式網頁設計圖 ( 一 ) 為大尺寸瀏覽器寬度在 980px 以上版面會完整顯示圖 ( 二 ) 為中尺寸瀏覽器寬度在 600 ~ 979px 版面會按比例縮小圖 ( 三 ) 為小尺寸瀏覽器寬度在 599px 以內版面會變成單欄圖(一) 圖(二) 圖(三) 14-9

14-4-1 viewport viewport viewport ios Android 3.

7 viewport viewport viewport ios Android 3.X viewport 980 viewport viewport ( ) ( ) ipad Air ipad Mini ipad Air ( ) ipad Mini ( ) ipad Air ( ) ( ) density ( ) ipad Mini PPI (Pixels Per Inch) density 1 ipad Air PPI 326 density =

回應式網頁設計 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.

8 回應式網頁設計 14 density viewport density ipad Air ipad Mini density 2 1 viewport ipad Air ipad Mini ( ) ( ) ( ) ( ) iphone iphone iphone iphone iphone 6 Plus ipad Air ipad Mini

9 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> CSS3 07 ( ) pc.css ~ 979 ( ) tab.css ( ) 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

10 回應式網頁設計 PC 600 ~ PC PC 20px *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

11 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

12 回應式網頁設計 px *2=940px 980px 05 10px px 20px px 20px PC 100% 600/940 64% 320/940 34% a b c a ( 100%) b ( 64%) c ( 34%) 14-15

13 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% /940 64% /940 34% % PC 100% a b c a ( 100%) b ( 100%) c ( 100%) 14-16

14 回應式網頁設計 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% % % % :<!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

15 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: <br> <br> 46: </p> 47: </footer> 48: </div> 49: </body> 50:</html> <\Ch14\RWD1.html> ( 2/2) 14-18

16 回應式網頁設計 ~ 23 img1.jpg pc.css 25 ~ 28 img2.jpg 30 ~ ~ 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

17 PC a b a b 14-20

CH15.indd

CH15.indd Chapter 15 Bootstrap 15-1 (RWD) 15-2 Bootstrap 15-3 15-4 15-5 CSS 15-6 15-1 (RWD) (RWD Responsive Web Design) ( ) PC W3C ( ) ( ) ( ) ( ) ( ) ( ) 15-2 15 15-2 Bootstrap Bootstrap Twitter Blueprint Twitter