Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Mohammad Barroq
Mohammad Barroq
1,363 Points

common breaking points in Media query

what are the common breaking points in media query ? do websites have too many of them to fit every single device !!? it well also may take too much time to load the page once I have too many media queries. my question is: are there any common media queries works for every one ?

2 Answers

Steven Parker
Steven Parker
230,248 Points

Unless you go crazy with it, your CSS will not impact your loading time much if at all. Loading time is typically primarily video, images, and audio.

I think with thoughtful design, most devices can be grouped into a small number of classifications (such as phone, small tablet, large tablet, and computer screen), with one media query per classification.

:information_source: The DevTools in chrome have a neat device simulator mode to help with responsive development.

Mohammad Barroq
Mohammad Barroq
1,363 Points

you are right !

I thought there may be some common media queries based on the most used devices, but that relate directly to the website audience which mean it changes based on the project itself.

so research is a mandatory to figure those queries out.

thank you !

It's best practice to create them where they need to be used as far as how your website is designed.

But here is an article that will answer your question!

Media Queries for Standard Devices: https://css-tricks.com/snippets/css/media-queries-for-standard-devices/