Responsive Web Design

Transcript

1. Ϩεϙϯγϒ ɾ σβΠϯ

2. Ϩεϙϯγϒͱ͸
   ˠ
   ಺༰͸ಉ͡Ͱɺը໘αΠζʹԠͯ͡ϨΠΞ΢τ͕มΘΔ /),
   IUUQTXXXOILPSKQ
    ߦ͋ͨΓຕ ߦ͋ͨΓຕ ԣʹฒͿ ॎʹฒͿ ύιίϯ εϚϗ ϨεϙϯγϒɾσβΠϯ͸
   

   8FCαΠτͷεϚʔτϑΥϯ࠷దԽ
   ͷͨΊͷɺ࠷΋ελϯμʔυͳख๏

3. ௨ৗ͸ͭ
   ˞ϞόΠϧϑΝʔετʹεϚϗΛ௨ৗͱߟ͑Δ ը໘ͷ෯͕޿͍ͱ͖͸ͭ ϨεϙϯγϒɾσβΠϯͷߟ͑ํ width: 50%; width: 50%; width: 33.33%; width:

   33.33%; width: 33.33%; .item { width: 33.33%; } .item { width: 50%; } 
   ը໘෯͕޿͍ͱ͖͸
    
   ௨ৗ͸
   

4. Ϩεϙϯγϒʹ͢Δ$44ͷॻ͖ํ @media screen and (min-width: 560px) { .item { width:

   33.33%; } } 
   ը໘෯͕গͳ͘ͱ΋QY
   
   ˠ
   λϒϨοτͷදࣔͷ৔߹
   
    @media screen and (min-width: 960px) { .item { width: 25%; } } 
   ը໘෯͕গͳ͘ͱ΋QY
   
   ˠ
   ύιίϯͷදࣔͷ৔߹
    .item { width: 50%; } 560pxҎ্ 960pxҎ্ εϚϗ λϒϨοτ ύιίϯ 
   ௨ৗ
   
    
   XJEUI
   
   Λ্ॻ͖
    
   XJEUI
   
   Λ্ॻ͖
    ͔͕ͬ͜ೋॏʹͳΔͷͰ஫ҙʂ

5. Ϩεϙϯγϒʹ͢Δίπ @media screen and (min-width: 560px) { } @media screen

   and (min-width: 960px) { } $44Λॻ͍ͨΒɺ
   ը໘ͷ୺Λυϥοάͯ͠
   ෯Λมߋͯ͠ɺ
   දࣔΛ֬ೝ͢Δɻ ը໘ ҎԼ͸ຖճ࢖͏ͷͰίϐϖͯ͠࢖͏ɻ
   ˞֮͑ͳ͍͍ͯ͘