Media Queries breakpoints for Standard device in Responsive Web Design

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.

Share this Article on Social Media

All of my Scripts are ready to customized as per your requirement. Feel free to contact for script customization.

Contact me at discussdesk@gmail.com

"Note : It will be charged as per your customization requirement :)"

Get Updates, Scripts & Other Tutorials to Directly to your Email

Over 20000+ Happy Readers already subscribed. (We don't send spam email). Every email subscriber can get our latest updates and download our 100+ scripts.

Comments