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 “,”:

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:

the place for my daily writing
Do you remember what you did last week? and what about how you felt? and last month? and last year?
sign up free 


Leave a Reply

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