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

Please have a look at the [layout](https://i.stack.imgur.com/EpLMA.jpg) I have in mind. Will Bootstrap allow me to create this? — Karan Dudeja, Dec 18 '16 at 10:09
I think it can be resolved. (I'm not sure!) But the picture frame hanging quite strange. — adampweb, Dec 18 '16 at 10:21
I'll check Bootstrap and see the possible layouts I can achieve, but in terms of the media queries, as per my question. Is that the correct way to proceed? — Karan Dudeja, Dec 18 '16 at 10:39
Bootstrap 3 media quieries default values: https://scotch.io/tutorials/default-sizes-for-twitter-bootstraps-media-queries — adampweb, Dec 18 '16 at 10:41
Thanks for the link you provided. However, my search for the answer is still on. — Karan Dudeja, Dec 18 '16 at 11:10
where are you getting the image from for your desired layout? do you know how to code any website? — mlegg, Dec 18 '16 at 21:21
Hi @mlegg The desired output image is something I constructed in sketchapp. And then uploaded it with my question. & I'm learning how to code website(s). Does that answer your question? — Karan Dudeja, Dec 19 '16 at 07:42

score 0 · Answer 1 · answered Dec 19 '16 at 17:55

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)
{ }

Hello @mlegg Apologies for this delayed response. Actually, I couldn't figure out the way yet to resolve, my query so for now I have decided to switch to implementing the portfolio site with Bootstrap, as it reduces the cross-broswer glitches I might run into. Thanks for sending me a reference to all the media queries mention in the codePen. Cheers! — Karan Dudeja, Feb 02 '17 at 19:58

Developing responsive website, independent of device resolution

1 Answers1