2016 中正大學 weic.tw - RWD

RWD 快速 brief.
any question or discuss: yiyingwu.1990[at]gmail.com

文章內容若有問題煩請來信告知，yiyingwu.1990小老鼠gmai.com !

Transcript

1. Responsive Web Design Win Wu 2016.5 weic.tw background image source: https://www.pexels.com/photo/road-wet-rain-landscape-62464/
2. 覍ૡ纷䒍薥݋縄Ӿጱ... Responsive Web Design ? ᴨ犋疰ಋ秚粚翕ᒊ? অ猟肯藯አ Bootstrap 疰ݢ犥 ᮎইຎ౯藶֦䒻盜ጱ扖牧 ӥ因೘ݢ犥䒻౯಩ਥ翕硬౮ RWD 㻟? ฎ狕硬 HTML / CSS 疰অԧ㻟?
3. 䔶ᘏ౯๏݋牧Ӟ᥺犥莯ԏ! ұҝҝ
4. About Me Win Wu 珂௑绊 Software Engineer ࡅ稭፡ૡٍ䨗牧Ꮈ绗Ӟ犚碝ጱ Web 樄咳ದ蔩牧ૡ֢Ԇᥝ瑻媅ࣁ 70% 獮ᒒ樄咳 30% 盅ᒒ樄咳牐 Blog / Ӟ犚ଘ桅ፗ硼ದ蔩ፘ橕෈ 
 Mail / yiyingwu.1990[at]gmail.com HTML/CSS/JavaScript PHP Node.js
5. ٌ䋿 RWD ᥝ薹究ጱ㺔氂 盄墋㻌 ౼瑽ᛔ Ӿ苉࿆㾴者翄଱ ਥ翕
6. RWD ጱ稲ݥ抓 800px / 960px /1024px 螂݄౯㮉磧ଉ憎ጱ蓦癷य़ੜ
7. ፗک... 2007 ଙ iPhone 㺔Ӯ牧౮傶 Web 戔懯ጱ旉矃讨牐
8. ฬ眻ಋ秚㺔Ӯ 虏य़疑樄ত௏ᘍ ই֜虏翕ᒊ螀֢ࣁ蝡犚ಋഩय़ੜ膢ጱ蕕ᗝӤ
9. m 樄毣ጱৼ翕ऒ (m-dot) website ้妿窕ᤈ牐 /้҃妿窕ᤈጱ఺௏犋դ蔭匍ࣁ犋胼ֵአ蝡圵狶ဩ҃/ www.facebook.com m.facebook.com 翕ᒊ樄ত獤蕈
10. Device ᩼㬵᩼ग़ 襎脲 / ಋ秚 / ଘ礂 / ฬ胼ಋ袓 / 襎憙 櫞螇ᥝᴻԧ m. ৼ翕ऒԏक़牧螭ᥝ tablet./ tv./ watch. ? image source: apple.com, https://www.apple.com/support/assets/images/products/iphone/hero_iphone_6s_5se_2x.png
11. ݶ碻傶姘虁Ӟ犩 纷ୗ嘨ጱ౮๜᩼㬵᩼ṛ牐
12. https://responsivedesign.is/examples https://responsivedesign.is/examples/blogs/trent-walton ౯㮉襑ᥝӞ圵 ݢ犥螕አय़蟂犩蓦癷疳ੑጱොဩ牐
13. Ethan Marcotter ࣁ 2010 ଙෝ A List Apart ൉ڊ Responsive Web Design ጱ禊盢牐 瑽粙౼瑽ᛔ物 http://alistapart.com/article/responsive-web-design
14. What is RWD ? ֵݶӞ㮆翕殷ݢ犥ࣁ犋ݶ Device Ӥݢ犥虏 User ᛥ螕 ጱ倵薩牧ᘒӬฎ Content First牐Ӭ哴ᰁ仂੝婘硯牧ଘ ᑏ缛砺֢誢涢牐 ڥአ甿誢礚扇 (Media Query), 窕㵕ୗ蟴ᗝ(Fluid Layout), 䕃௔ጱ瑽粙氥纈疳ੑ㬵蕣֢翕殷牧ֵ翕殷胼 䄪螕ݳࣁ犋ݶ蓦癷य़ੜӥ倵薩牐
 ۑ胼Ӥጱਧ嬝 犥獮ᒒૡ纷䒍ጱ薫ଶ㬵፡ 瑽粙౼瑽ᛔ物 http://mediaqueri.es/
15. Why RWD ? 虏ྯ圵蕕ᗝ胼氥纈ፘ䌘䛑螕ݳጱ粚ᶎ蟴ᗝ 斃੝ጱ姘虁౮๜ 矾疨磧֯玕
16. Why RWD ? 虏ྯ圵蕕ᗝ胼氥纈ፘ䌘䛑螕ݳጱ粚ᶎ蟴ᗝ 犋抷አՋ讕蕕ᗝ薪፡牧獉਻᮷䛑扗ᥝྋ嘦ጱᤩ疻纈牐
17. Why RWD ? 斃੝ጱ姘虁౮๜ ݝ襑ᥝӞ㮆翕ᒊ牧櫒簁ڡ๗伛猋纸盏聻ۑॢ牧֕盅๗ጱ 姘虁౮๜斃犵牐
18. Why RWD ? 矾疨磧֯玕 ই m.example.com/article-1.html example.com/article-1.html ஠殾ᥝమ旰ဩ虏 Search Engine Ꭳ螇ٌ䋿犢㮉ฎݶӞ奲獉਻牧 ದ蔩Ӥฎݢᤈጱ牧ے獈 Canonical URL 瞲ݻݶӞ翕࣎ܨݢ
19. 墋㻌Օ奧ದ蔩奞℄
20. 獮眐൉ᥝ: RWD 㪔犋ฎӞ㮆碝ጱ承᥺牧 ֕ਙୌ缏ࣁ HTML / CSS च器Ӥ牐
21. ࢧ稳ک Web ጱ๜搡 Structure 奾䯤 HTML CSS JavaScript Presentation 蔭匍䍅 Behavior ᤈ傶䍅
22. HTML CSS JavaScript JavaScript ݢ犥ᤩ硯ࣁ HTML 䲆愊ᶎ౲ฎ加缏 ጱ .js 䲆礯牐 犋ֵአ JavaScript Ӟ䰬ݢ犥ୌ缏 翕ᒊ牐 䍅吩䰬ୗ蔭(Cascading Style Sheets牧墋䌃 CSS)牧አ㬵傶 HTML 奾䯤Ⴒے䰬ୗ牐 ᩻෈կ秂纈承᥺ (HyperText Markup Language) ฎӞ圵አෝୌ缏翕殷ጱ秂伛秂懿ୗ 承᥺牐HTMLฎӞ圵च器ದ蔩牧ଉ膏 CSS牏 JavaScriptӞ蚏ᤩ唰ग़翕ᒊአෝ戔懯犤Ո搕ஞ 盽ፓጱ翕殷 - wiki
23. HTML CSS JavaScript ࣁ HTML ્獈 JavaScript ጱොୗ: ࣁ HTML 殷ᶎӾ્獈 CSS ጱොୗ: ፗ矑犥 .html 䲆ݷ牧㪔Ӭ犥 HTML 秂壆樄ত翥 蜉翕殷ጱ獉਻膏 HTML 奾䯤牐 ✤ ֵአ .css 䲆礯㪔蝚螂 link 秂壆ਧ嬝୚獈ጱ css ✤ inline-style ✤ <style> ✤ <script> ✤ ࣁ html ୚獈 .js 䲆礯
24. … for RWD? RWD ᯿ᥝӣկԪ Media Query Flexible Media Fluid Grid System
25. CSS ጱ Media Query Media Query ݢ犥礬硁戔猋牧倵薩瑊ጱ氥纈ጱ疝ṛ (ViewPort य़ ੜ)牧ොݻ缛狶ڊ犋ݶጱ CSS 䰬ୗ戔ਧ牐ݢ犥藯ฎ Responsive 磧橕 棎䛑አ߶! @media [media type] and [(media feature)] * Media type names are case-insensitive. ٌ䋿 CSS ጱ Media Query ࣁ CSS2 碻疰磪牧ݝฎࣁ CSS3 ಍஑ک穉 斃獅᪃ጱඪൔ牐
26. Media Query Type ݢ犥㯏介戔猋圵觊 all, screen, print, speech @media print { body { font-size: 10pt } } @media screen, print { body { line-height: 1.2 } } 䌃梊ெ讕旰牫牦 硯❤️牧倵薩瑊ݝ፡犢㮉፡஑睞ጱ CSS ਯޞ... screen դ蔭犨ٍ֜磪蓦癷ጱ䩚ᥜ牐
27. 瑽粙౼瑽ᛔ物 https://developer.mozilla.org/zh-TW/docs/Web/CSS/@media
28. Media Query ݢ犥 Query Ջ讕? width 憙ओ疝ଶ (ݢ憎疝ଶ) height 憙ओṛଶ (ݢ憎ṛଶ) device-width 蕕ᗝ疝ଶ device-height 蕕ᗝṛଶ Orientation 蕕ᗝਧݻ (*֕犖੢๚ᤩಅ磪倵薩瑊ඪൔ) aspect-ratio / device-aspect-ratio 疝ṛ穉
29. Media Query ݢ犥 Query Ջ讕? 憙ओ(viewport): 翕ᒊࣁ蓦癷Ӥᤩ疻纈ጱ玟ऒ(ࣁ倵薩瑊憙绯愊)牧 墋㻌㬵藯疰ฎ倵薩瑊愊ᶎ牧䋿褬۱珀翕殷ጱ疝ṛ牧֦஠殾ᥝಕധ倵 薩瑊ጱ scroll bar, ૡٍڜ, 皈蟂, ṛଶ缛缛獵ӥ಍ฎ憙ओ牐 蓦癷疝ṛ: ᰁ介کጱ独ฎ䋿褬ጱ蕕ᗝ蓦癷牧犖疰ฎ疰ᓒ藲碉倵薩瑊 疝ṛ犖犋䨝୽段蝡㮆独牐
30. Media Query Example 礬硁蓦癷疝ଶ http://jsbin.com/faxaqusuge/edit?html,css,output @media screen and (device-width: 1280px) { body { background-color: lightgreen; } } 蚤茐 device牧犋䨝ࢩ傶倵薩瑊憙绯य़ੜᘒ硬虋
31. Example 礬硁憙ओ疝ଶ (ݢ憎疝ଶ) http://jsbin.com/qafajujoko/edit?html,css @media screen and (min-width: 1000px) { body { background-color: lightgreen; } } 䨝ࢩ倵薩瑊憙绯य़ੜ硬虋ᘒ硬虋 min- य़ෝ౲缛ෝ max- ੜෝ౲缛ෝ Media Query
32. Example 礬硁ොݻ Portrait Landscape @media screen and (orientation: portrait) {.....} @media screen and (orientation: landscape) {.....} Media Query
33. Example 憙ओ疝ṛ穉౲ฎ蓦癷疝ṛ穉ጱ穉ሲ牐 @media only screen and (min-device-aspect-ratio: 1920/1080) { …. } Media Query
34. Breakpoint 蝚螂 Media Query ౯㮉ݢ犥戔ਧԆᥝ䥁讨 Breakpoint牧朼䌘Ԇ窕 ጱ Device ֢傶Ӟ圵 Layout ጱ獥矦౲ฎ CSS ጱ藲碉牐 http://mediaqueri.es/ > xxxx px xx px ~ xx px xx px ~ xx px < xx px
35. ই֜螡䢔Ӿ䥁讨 Breakpoint 盄ग़戔懯ݝ䨝蟴ݳ窕ᤈጱ蕕ᗝ㬵೴螡Ӿ䥁讨牧ই iphone, ipad牐蝡 ฎ䷱磪Ջ讕㺔氂牧֕藶犋ᥝ಩ᆌ讨ݝ硯ࣁᮎ皃㮆Ӿ䥁讨፡蚏㬵ই֜牐 ᯿讨: 戔懯ࣁྯ㮆Ӿ䥁讨ԏ樌ጱ塅瑻፡蚏㬵ই֜牧ᘒ犋ݝฎࣁ礓㮆 Ӿ䥁讨Ӥ፡蚏㬵ই֜牐 http://jsbin.com/rulanopime/edit?html,css
36. 介手 Media Query ጱ奾ຎ http://mqtest.io (娄Ӥૡٍ耆ग़牧蝡愊㰍傶膐ֺ) 䋿褬೭ Device 介手 (聻碻牧֕斃伛嘦) ֵአ倵薩瑊൉׀ጱ藲手ૡٍ (֕磪犚ᤈ傶 PC 螭秇硈犋ڊ㬵)
37. Flexible Media img { max-width: 100%
 } 甿誢虻碘໒ୗ犋妔ࢴਧ疝ଶ牧礬硁 device 蝱ᤈ婘硯牐 ౲ฎֵአ img ጱ data 痀௔牧㬵䋿匍犋ݶ戔猋ጱ瑽粙氥纈牐 img { width: 300px } img { width: 100%; max-width: 100% }
38. Fluid Grid System चෝጯ獤穉ጱ蟴ᗝ虏翕殷ጱ戔懯ๅ磪 䕃௔牐蟴ݳ蓦癷疝ଶ牧獅獤ڥአ翕殷 绚樌牐
39. 瑽粙౼瑽ᛔ物 http://mediaqueri.es/
40. RWD 戔懯ොဩ 犥侅蝱ी䔶ጱොୗ戔懯 Progress Enhancement ℂੜ蓦癷樄ত牧獉਻猻ض 蝛ྍ猻玕牧侅蝱 RWD牧犋盪茐Ӟ稞ک֖牐 (Mobile) Content Strategy 蝢ଉֵአᘏ犋䨝ဳ఺کฎ犋ฎ RWD 翕殷牧ݝࣁԒฎ犢మ፡ጱ獉਻
41. RWD 戔懯ොဩ ֵአ翕໒戔懯 段䛑ୗ戔懯櫒簁襑ᥝ fluid layout牧䕃௔ጱ戔懯ฎ஠ᥝ牧֕翕໒ฎ覍஠ᥝ牐 ݝ犋螂翕໒ଉଉᤩ憙傶ฎୌ缏戔懯臑অ翕ᒊጱ橕棎ԏӞ牐 ֵአ䪢䳱戔懯 (Column) ಩翕ᒊय़ੜ獤౮̿12̀䳱ฎଉ憎ጱ֢ဩ牧ࢩ傶̿12̀蝡㮆 碍ਁ磪盄य़ጱ䕃௔牧ݢ犥ᤩ 2, 3, 4, 6 碉ᴻ牐
42. ᤈ傶癩吖 ಋ秚䷱磪 a:hover 硳ຎ牧䷱磪ೲݦ棎缛 PC 䨝磪ጱ砺֢牐 RWD 犖ᥝ觎现砺֢Ӥጱ׎ڥ௔牐
43. 硳胼㺔氂 段䛑ୗ翕殷妃䌘犋ฎ፡Ӥ݄段䛑疰 ok… RWD 磧虏Ո扑የጱ㺔氂疰ฎ硳胼牐 磧ଉ憎ጱ㺔氂ஃஃڊࣁෝ瑽粙 Loading 螂᯿牐 介手碻᮷አ PC ጱ秇硈瑊介牧㶴ஃஃ䨝஺ኼکٌ犢 device 翕᪠蝫娄ጱ眐丆牐 HTML/CSS/JavaScript ग़܎ݝ胼薹究憙憽Ӥጱ㺔氂牐
44. 硳胼傶Ջ讕᯿ᥝ ࢩ傶፡ጱՈ䷱磪ᘔஞ缛盃牐
45. ই֜硬珿硳胼㺔氂 ✤ 仂੝ HTTP 藶穩 ✤ 瓟婘䲆礯 ✤ 珸㵕倵薩瑊ጱ盠玲 ✤ ᑏᴻᴥ繸斉獈ጱ JavaScript ✤ 瑽猟ݳ㬫 CSS Sprite Many… Many…
46. Q: 藶 Google 啻薹Ӟӥ <meta> ጱ viewport ฎՋ讕现֢አ? Q: ֦藨傶֦吚ӥ䁆ᤈጱ䌕礯牧ֵአಋ秚ጱ碢ᗭ制丆ฎই֜? Q: 傶Ջ讕腷䨗 Web 粚犋狶 RWD ᘒฎݚक़蕣֢ಋ秚粚翕ᒊ? Q: మమಋ秚粚翕ᒊ v.s Native App ጱ癩吖牐 Q: 啻薹 respond.js ጱ֢አ (github.com/scottjehl/respond) Ӟ犚妔֦ጱੜۑ抓
47. Thank You
48. 䋊聜虻რ https://www.codecademy.com/learn https://www.codeschool.com/learn/html-css https://www.coursera.org/
49. 硳胼介手 ✤ Mobitest http://mobitest.akamai.com ✤ Chrome PageSpeed ✤ http://www.webpagetest.org/ Google: web speed test
50. 㷢ᘍ https://speakerdeck.com/peruvianidol/road-to-responsive http://mediaqueri.es/ http://www.vcarrer.com/2010/11/css-mobile-reset.html https://www.w3.org/TR/CSS21/media.html http://www.jianshu.com/p/006db7312b71 http://xinyo.org/archives/64557/ Responsive Web Design 段䛑ୗ翕殷戔懯䋊聜ಋ㲘 - 稨苟因