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) {…}
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:
- Jamal, in the post Overview of Breakpoints in Responsive Web Design.
- Image from the post Examples of Great Responsive Website Design.
Hi, after reading this awesome post i am as well happy to share my knowledge here with mates.