Responsive Break Point Media Query Boilerplate

breakpoints.css

// Mobile First

@media screen and (min-width: 321px) { // iPhone landscape

}

@media screen and (min-width: 481px) { // iPad portrait

}

@media screen and (min-width: 769px) { // iPad landscape

}


// Desktop First

@media screen and (max-width: 320px) { // iPhone portrait

}

@media screen and (max-width: 480px) { // iPhone landscape

}

@media screen and (max-width: 768px) { // iPad portrait

}

@media screen and (max-width: 1024px) { // iPad landscape

}