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

Ashish Jain
Ashish Jain
6,319 Points
Posted by Ashish Jain
Ashish Jain
6,319 Points

responsive web designs

Hi, I am not unable to understand the difference between (min-width) and (max width). I know its purpose but I am unable to understand when to use what. can anyone help me in clarifying this query? thanks.

Furthermore, can we make separate style-sheets for different break points? will it not increase the weight of the site and delay the downloading speed?

1 Answer

Jamie Reardon
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Jamie Reardon
Treehouse Project Reviewer
Jamie Reardon
.a{fill-rule:evenodd;}techdegree seal-36
Jamie Reardon
Treehouse Project Reviewer

Hi,

The min width media feature means that whatever size you set in the condition e.g. 1025px, then that means that when the browser is at least 1025px and larger the styles will be applied.

The max width media feature means that when the browser width is at or below the size defined in the condition, then the styles will be applied.

Therefore, Responsive web design takes building from a mobile first approach which uses the min-width media feature since you are building the site upwards to larger screens.

You would typically use max width when designing for the site from larger to smaller screens.

It is best practice to use the mobile first approach.

You can use separate stylesheets for your media query break points to increase clarity and good code organisation. For example, you could create a stylesheet called responsive.css that holds all your media queries.