This approach assumes you are starting a responsive design project from scratch and you will use progressive enhancement (also referred to a “mobile first”) approach
/* main.css */
/*
Extra small devices (portrait phones, less than 576px)
No media query since styles outside of the media queries below will apply to everything 'up to 576px' or everything below 576px
*/
p {
}
.some-default-style {
}
/*
Small devices (landscape phone, 576px and up)
*/
@media only screen and (min-width: 576px) {
/* styles go here */
}
/*
Medium devices (tablets, 768px and up)
*/
@media only screen and (min-width: 768px) {
/* styles go here */
}
/* Large devices (desktops, 992px and up) */
@media only screen and (min-width: 992px) {
/* styles go here */
}
/* Extra Large devices (large desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {
/* styles go here */
}
This approach assumes that you already have an existing project that is using a fixed layout design and you want make the site responsive. The following proposed CSS file structure assumes the default styles (i.e. the styles that are not within media query) are for your widest viewport (~1200px or greater)
/* main.css */
/* Extra Extra Large devices (large desktops, 1200px and up) *
No media query since styles outside of the media queries below will apply to everything 'greater than 1200px'
*/
p {
}
.some-default-style {
}
/* Extra Large devices (large desktops, 1200px and down) */
@media only screen and (max-width: 1200px) {
/* styles go here */
}
/*
Large devices (desktops, 992px and down)
*/
@media only screen and (max-width: 992px) {
/* styles go here */
}
/*
Medium devices (tablets, 768px and down)
*/
@media only screen and (max-width: 768px) {
/* styles go here */
}
/*
Small devices (landscape phone, 576px and down)
*/
@media only screen and (max-width: 576px) {
/* styles go here */
}
These are good starting points but you should use your judgement and select breakpoints based on your specific design