Media Queries breakpoints for Standard device in Responsive Web Design

Abhigyan Singh 12th Jul 2020

In this tutorial we will learn about Media Queries breakpoints in Responsive Web design. Media Queries breakpoints are an important rule or setting to create responsive design. The main goal of responsive we design to have a better user experience while browsing the site in any devices. So for setting rules for all devices, we need to create a common CSS file that have separate viewpoints for all devices and Media Queries is a best tool to create viewpoints for all device.

What is Responsive Web design

Responsive Web design (RWD) is a method to create website that is compatible with all devices and all screens. Responsive Web design does not means a mobile site. Both are different. Using Responsive Web design we can resize, scroll our web page according to all devices and screens. Currently, every search engine also recognizes responsive web design. As per user experience, they can easily navigate website in all device.

A web site created with Responsive Web Design technique adapts the layout to the viewing setting by victimization fluid, proportion-based grids, versatile pictures, and CSS3 media queries and an extension of the @media rule, within the following ways:

 

  • The fluid grid conception needs page component size to be in relative units like percentages, instead of absolute units like pixels or points.
  • Flexible pictures also are sized in relative units; therefore on stop them from displaying outside their containing component.
  • Media queries enable the page to use completely different CSS rules supported characteristics of the device the positioning is being displayed on, most ordinarily the breadth of the browser.

Explanation:

You can directly copy and paste the below code to create viewpoint. For every viewpoint, there is a breakpoints that defines the minimum width and resolution for that devices.

/* ======= Desktops and laptops ======= */
@media only screen and (min-width : 1224px) {
/*------------ Styles go here ------------- */
}

/* ======= Large screens ======= */
@media only screen and (min-width : 1824px) {
/*------------ Styles go here ------------- */
}

/* ======= (portrait and landscape) ======= */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
/*------------ Styles go here ------------- */
}

/* ======= Smartphones (landscape) ======= */
@media only screen and (min-width : 321px) {
/*------------ Styles go here ------------- */
}

/* ======= Smartphones (portrait) ======= */
@media only screen and (max-width : 320px) {
/*------------ Styles go here ------------- */
}

/* ======= iPads (portrait and landscape) ======= */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
/*------------ Styles go here ------------- */
}

/* ======= iPads (landscape) ======= */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {
/*------------ Styles go here ------------- */
}

/* ======= iPads (portrait) ======= */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
/*------------ Styles go here ------------- */
}

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio : 2) {
/*------------ Styles go here ------------- */
}

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio : 2) {
/*------------ Styles go here ------------- */
}

/* ======= iPhone 4 ======= */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio : 2) {
/*------------ Styles go here ------------- */
}

@media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio : 2) {
/*------------ Styles go here ------------- */
}

/* ======= iPhone 5 ======= */
@media only screen and (min-device-width: 320px) and (max-device-height: 568px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){
/*------------ Styles go here ------------- */
}

@media only screen and (min-device-width: 320px) and (max-device-height: 568px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){
/*------------ Styles go here ------------- */
}

/* ======= iPhone 6 ======= */
@media only screen and (min-device-width: 375px) and (max-device-height: 667px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){
/*------------ Styles go here ------------- */
}

@media only screen and (min-device-width: 375px) and (max-device-height: 667px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){
/*------------ Styles go here ------------- */
}

/* ======= iPhone 6+ ======= */
@media only screen and (min-device-width: 414px) and (max-device-height: 736px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){
/*------------ Styles go here ------------- */
}

@media only screen and (min-device-width: 414px) and (max-device-height: 736px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){
/*------------ Styles go here ------------- */
}

/* ======= Samsung Galaxy S3 ======= */
@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){
/*------------ Styles go here ------------- */
}

@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){
/*------------ Styles go here ------------- */
}

/* ======= Samsung Galaxy S4 ======= */
@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 3){
/*------------ Styles go here ------------- */
}

@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 3){
/*------------ Styles go here ------------- */
}

/* ======= Samsung Galaxy S5 ======= */
@media only screen and (min-device-width: 360px) and (max-device-height: 640px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 3){
/*------------ Styles go here ------------- */
}

@media only screen and (min-device-width: 360px) and (max-device-height: 640px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 3){
/*------------ Styles go here ------------- */
}

/* ----------- Kindle Fire HD 7" ----------- */

/* Portrait and Landscape */
@media only screen and (min-device-width: 800px) and (max-device-width: 1280px) and (-webkit-min-device-pixel-ratio: 1.5) {
/*------------ Styles go here ------------- */
}

/* Portrait */
@media only screen and (min-device-width: 800px) and (max-device-width: 1280px) and (-webkit-min-device-pixel-ratio: 1.5) and (orientation: portrait) {
/*------------ Styles go here ------------- */
}

/* Landscape */
@media only screen and (min-device-width: 800px) and (max-device-width: 1280px) and (-webkit-min-device-pixel-ratio: 1.5) and (orientation: landscape) {
/*------------ Styles go here ------------- */
}

/* ----------- Kindle Fire HD 8.9" ----------- */

/* Portrait and Landscape */
@media only screen and (min-device-width: 1200px) and (max-device-width: 1600px) and (-webkit-min-device-pixel-ratio: 1.5) {
/*------------ Styles go here ------------- */
}

/* Portrait */
@media only screen and (min-device-width: 1200px) and (max-device-width: 1600px) and (-webkit-min-device-pixel-ratio: 1.5) and (orientation: portrait) {
/*------------ Styles go here ------------- */
}

/* Landscape */
@media only screen and (min-device-width: 1200px) and (max-device-width: 1600px) and (-webkit-min-device-pixel-ratio: 1.5)and (orientation: landscape) {
/*------------ Styles go here ------------- */
}

You just need to copy and paste the above code and write your CSS script.

Authored By Abhigyan Singh

He is a continuous blogger and has blogged on different topic. He loves to surf Internet and always trying to get new Idea about new Technology and Innovations and sharing these great information to all the technology lovers.

Also on DiscussDesk