Upgrade to Pro — share decks privately, control downloads, hide ads and more …

2016 中正大學 weic.tw - RWD

2016 中正大學 weic.tw - RWD

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

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

B72258db4bea39b1ff31ca60725be83f?s=128

winwu

May 14, 2016
Tweet

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

    段䛑ୗ翕殷戔懯䋊聜ಋ㲘 - 稨苟因