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

Responsive Web Design

Sponsored · Your Podcast. Everywhere. Effortlessly. Share. Educate. Inspire. Entertain. You do you. We'll handle the rest.

Responsive Web Design

Avatar for Masateru YOSHIMURA

Masateru YOSHIMURA

July 07, 2020
Tweet

More Decks by Masateru YOSHIMURA

Other Decks in Technology

Transcript

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

    33.33%; width: 33.33%; .item { width: 33.33%; } .item { width: 50%; }  ը໘෯͕޿͍ͱ͖͸   ௨ৗ͸ 
  2. Ϩεϙϯγϒʹ͢Δ$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Λ্ॻ͖  ͔͕ͬ͜ೋॏʹͳΔͷͰ஫ҙʂ
  3. Ϩεϙϯγϒʹ͢Δίπ @media screen and (min-width: 560px) { } @media screen

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