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:

idazki
the place for your small wins.
Write down every day the things that are important for you, your feelings, your progress, your tasks done and access to them everywhere you are, easily and fast.
sign up free 

Leave a Reply

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