Skip to content

Instantly share code, notes, and snippets.

@pixmin

pixmin/Codi3-RWD-mediaqueries.md

Last active May 30, 2018 13:49
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save pixmin/951843a65c4ba8a0fdcbf1041bceec10 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save pixmin/951843a65c4ba8a0fdcbf1041bceec10 to your computer and use it in GitHub Desktop.
Download ZIP
Codi #3 Responsive Web Design & Media queries
Raw
Codi3-RWD-mediaqueries.md

Responsive Web Design and Media Queries

https://openclassrooms.com/courses/qu-est-ce-que-le-responsive-web-design

Plusieurs sites?

Problemes:

  • SEO
  • Temps

Solution:

  • Un site qui s'adapte

Points de rupture

Viewport mobile

<meta name="viewport" content="width=device-width" />

Mobile first

Tips

CTRL SHIFT M (instead of resizing the window)

Exo

  • BG color change > 600px
  • Hide element < 900px

Challenge 3

  • Pas besoin de div/span
  • Attention aux buttons > a
  • Le fond s'étend sur TOUT l'écran
  • Le rendre Responsive
  • Pas de float (menu)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment