CSS Unused CSS Stages Media Queries Adaptive Layouts with Media Queries

Joseph Wilkinson
Joseph Wilkinson
2,615 Points

In the adaptive layouts and media queries video, how did you calculate the specific widths that you wanted to use?

The widths seem to be very precise and I was unsure how you came to the conclusion of what numbers to use.

2 Answers

Ken Alger
STAFF
Ken Alger
Treehouse Teacher

Joseph;

Generally speaking, you design your media break points based on when the design changes (breaks down) based on browser width. Design your sites using a mobile first design process and it helps solve some of the responsive web issues. By resizing your browser, using some of the various dev tools, or device emulators, you can see where the break points can/should be set.

Hope that helps some.

Paul Sullivan
Paul Sullivan
7,876 Points

There is really no set method to the madness when it comes to setting your media queries. Some people have set intervales they use everytime for specific device widths. Some start with a mobile first approach and size up until things just... don't look right, then nudge things into place at that particular pixel width point. Some will start big and shrink the window and do the exact same thing.

Really just kind of depends on the project and what works best for you! In the case of the lessons shown here on Treehouse, they have simply already gone through the process of finding the "breakpoints" that they felt were best. They seem rather precise, because... well... they are, but it's all just a "gut feeling" on what you consider to be the best point to "break" at.