Breakpoints in Responsive Web Design

The goal of Responsive Web Design (RWD) is to build web pages that detect the visitor’s screen size and orientation and change the layout accordingly.

Break points in RWD are browser widths that have a media query declaration to change the layout once the browser is within the declared range.

Media queries are a feature of Cascading Style Sheets (CSS) allowing the developer to specify when a certain style takes effect.

Breakpoint: @media only screen and …
Mobile … (min-device-width : 320px) and (max-device-width : 480px) {…}
Tablets … (min-device-width : 768px) and (max-device-width : 1024px) {…}
Mobile Portrait … (max-device-width : 320px) {…}
Mobile Landscape … (min-device-width : 321px) {…}
Tablet Portait … (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {…}
Tablet Landscape … (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {…}
Custom (i.e.) … (max-device-width : 355px) {…}
Custom (i.e.) … (min-device-width : 340px) and (max-device-width : 355px) and (orientation : portrait) {…}

We can join two breakpoints using the “,”:

@media
screen and (max-width: 750px)
,
screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {…}

These Notes have been taken from:

Leave a Reply

Your email address will not be published. Required fields are marked *