Welcome to the Treehouse Community
Looking to learn something new?
Teacher Russell16,873 Points
min-width and max-width in media queries...
In the media queries of the first site we built on Treehouse, we had break points set at @media screen and (min-width:480px), and (min-width:660px).
In this site we set them at (max-width) and 768px/1024px. What is the reason for choosing max or min, and why those sizes specifically, and shouldn't it be less than 1024px if the screen is 1024px? ALSO confused about why the padding was added to .wildlife in the first query, when I thought it was only a problem in the smallest screen.
Michael Hulet47,842 Points
@media(min-width: 480px) will cause the media query to apply to all screen sizes equal to or wider than
@media(max-width: 480px) would cause it to apply to all screen sizes equal to or narrower than
480px. As for the different sizes, you should only include a media query when your design starts to break. The first website we made is a different one from the 2nd, with a different design that breaks at different points, so it has media queries for different sizes at the points where they each begin to break
Brady Borkowski7,495 Points
you use min and max because different devices have different sized screens. Your laptop screen will have a much larger width than say, a smartphone. We play around with the min/max-widths so that the website looks pretty and remains functional whether someone is using a smartphone or a large desktop screen.
Mariela Napoles13,434 Points
1024px etc are the sizes of the screen of different devices. Ive read that 992px = wide screen, 768px = normal screens, 600px = narrow screens, 320px = mobile screens. We cant say that we will use max-width all of the times and just ignore min-width, in fact we can use both. We use max-width for example, max-width: 320px, to say that a certain rules must affect from 0px UNTIL 320px. But if you use min-width:320px, the rules will affect your targeted element from 320px until it reach the next breakpoints you made, like for example, max-width: 600px. Hope this helps
Teacher Russell If you haven't found your answer already.... the numbers 1024, 768, 360, 600, 990 are sizes for popular viewports, based on the devices. For example 768 is iPad portrait, and 1024 is iPad landscape. Check out this slightly outdated (but still somewhat relevant) chart. http://gs.statcounter.com/#desktop+mobile+tablet-resolution-ww-monthly-201608-201610-bar
Maybe your question comes from Mobile First approach that concentrate the design on mobile view and use min-width to cater for larger viewport. Which should be the ideal. Max-width is used to actually design the mobile because we don't want our 320 design to be applied to sumo Mac screen i.e. 2000px (although that would be very hillarious imho).
Hope that helps.