Responsive Web Design

Responsive Web Design

91e7aee9769836f448a9f1ce91255749?s=128

Masateru YOSHIMURA

July 07, 2020
Tweet

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Λॻ͍ͨΒɺ ը໘ͷ୺Λυϥοάͯ͠ ෯Λมߋͯ͠ɺ දࣔΛ֬ೝ͢Δɻ ը໘ ҎԼ͸ຖճ࢖͏ͷͰίϐϖͯ͠࢖͏ɻ˞֮͑ͳ͍͍ͯ͘