Developing responsive website, independent of device resolution

Question

I am very new to web-front-end-development and I'm trying to develop a responsive website. I have decided on 5 breakpoints, i.e. mobile(2-portrait-landscape) from 320px-768px, tablets(2-portrait-landscape) from 769px-1024px, Desktop-Small from 1025px-1280px, Desktop-Medium from 1281px-1366px, Desktop-Large from 1367px-1680px and Desktop-ExtraLarge from 1681px-Above.

When I tested my first layout, developed on a Mac-Retina-13", the site looked reasonably okay on Safari & Chrome. But, it completely got distorted on an Acer-Windows-15", on Firefox & Chrome.

Then with some research I got to know about http://mydevice.io/ and Device-pixel-ratios.

I would like to know, in order to have a consistent viewing experience, across device regardless of the device resolutions & screen sizes, will I be using the following media queries?

/* Phones - portait */ 

@media only screen and (min-width: 320px) and (max-width: 768px) and (orientation: portrait) and (min-resolution: 96dpi) {

}

@media only screen and (min-width: 320px) and (max-width: 768px) and (orientation: portrait) and (min-resolution: 144dpi){

}

@media only screen and (min-width: 320px) and (max-width: 768px) and (orientation: portrait) and (min-resolution: 192dpi){

}

@media only screen and (min-width: 320px) and (max-width: 768px) and (orientation: portrait) and (min-resolution: 288dpi){

}

@media only screen and (min-width: 320px) and (max-width: 768px) and (orientation: portrait) and (min-resolution: 384dpi){

}

/* Phones - landscape */

@media only screen and (min-width: 320px) and (max-width: 768px) and (orientation: landscape) and (min-resolution: 96dpi) {

}

@media only screen and (min-width: 320px) and (max-width: 768px) and (orientation: landscape) and (min-resolution: 144dpi) {

}

@media only screen and (min-width: 320px) and (max-width: 768px) and (orientation: landscape) and (min-resolution: 192dpi) {

}

@media only screen and (min-width: 320px) and (max-width: 768px) and (orientation: landscape) and (min-resolution: 192dpi) {

}

@media only screen and (min-width: 320px) and (max-width: 768px) and (orientation: landscape) and (min-resolution: 288dpi) {

}

@media only screen and (min-width: 320px) and (max-width: 768px) and (orientation: landscape) and (min-resolution: 384dpi) {

}

/* Tablets - Portrait */

@media only screen and (min-width: 769px) and (max-width: 1024px) and (orientation: portrait) and (min-resolution: 96dpi) {

}

@media only screen and (min-width: 769px) and (max-width: 1024px) and (orientation: portrait) and (min-resolution: 192dpi) {

}

/* Tablets - Landscape */

@media only screen and (min-width: 769px) and (max-width: 1024px) and (orientation: landscape) and (min-resolution: 96dpi) {

}

@media only screen and (min-width: 769px) and (max-width: 1024px) and (orientation: landscape) and (min-resolution: 192dpi) {

}

/* Desktop - Small */

@media only screen and (min-width: 1025px) and (max-width: 1280px) and (min-resolution: 96dpi) {

}

@media only screen and (min-width: 1025px) and (max-width: 1280px) and (min-resolution: 192dpi) {

}

/* Desktop - Medium */

@media only screen and (min-width: 1281px) and (max-width: 1366px) and (min-resolution: 96dpi) {

}

@media only screen and (min-width: 1281px) and (max-width: 1366px) and (min-resolution: 192dpi) {

}

/* Desktop - Large */

@media only screen and (min-width: 1367px) and (max-width: 1680px) and (min-resolution: 96dpi) {

}

@media only screen and (min-width: 1367px) and (max-width: 1680px) and (min-resolution: 192dpi) {

}

/* Desktop - ExtraLarge */

@media only screen and (min-width: 1681px) and (min-resolution: 96dpi) {

}

@media only screen and (min-width: 1681px) and (min-resolution: 192dpi) {

}

Will I have to use these 23 media-queries? Am I going wrong somewhere?

Here's a sample of desired outputResponsive Site Layout

Answer 1

can you post a link to the website or a link to a jfiiddle with your code? or edit your question and hit CTRL + M and paste all of your code into the snipet box that opens? If you use the Bootstrap code your site will be mobile responsive. If you are coding it yourself use these http://codepen.io/mlegg10/pen/JKdOaj

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

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

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

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

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

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

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

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

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

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

/* iPhone 6 Plus landscape */
@media only screen
  and (min-device-width: 414px)
  and (max-device-width: 736px)
  and (orientation: landscape)
  and (-webkit-min-device-pixel-ratio: 3)
{ }

/* iPhone 6 Plus portrait */
@media only screen 
  and (min-device-width: 414px) 
  and (max-device-width: 736px) 
  and (orientation: portrait) 
  and (-webkit-min-device-pixel-ratio: 3)
{ }

/* iPhone 6 and 6 Plus */
@media only screen
  and (max-device-width: 640px),
  only screen and (max-device-width: 667px),
  only screen and (max-width: 480px)
{ }

/* Apple Watch */
@media
  (max-device-width: 42mm)
  and (min-device-width: 38mm)
{ }