1

I am working on 3 HTML5 responsive websites and they all need to be adapted for devices. I understand so far the media queries for small devices and I have seen good score on that, 320px, 375px, 425px, 480px, 768px, 1024px. Now the "problem" comes for bigger screen.

I still have few doubts, for example in the office where I am working they have really big screen 2560px but how should i write the right queries for that ?

I have an 11" macbook and my colleagues have also got a bigger one 13" where the homepage is showed in a different way.

Should i also set a max-width 1680px, max-width 1920px and max-width 2560px? I saw on Google that this are the most common big screens and is apparently "working" when I checked back in the office.

The real questions are: How should I work on bigger screen? Which settings should I use to show the same webpages on different big screens?

TylerH
  • 20,799
  • 66
  • 75
  • 101
Matteobikk90
  • 185
  • 1
  • 14
  • The answer to this question depends on the design you want to accomplish. You should not try to target all possible breakpoints unless that specific breakpoint is doing something new to your design. E.g. showing or hiding of elements and alike. That is the reason why I often have e.g. max-width: 1524px or whatever. Because it is the final width which just looks good... above that, nothing changes. The story is different if you want your page always to scale full width of the window.. but then you need bigger images and (most likely) fonts too... – Mauno Vähä Sep 27 '16 at 16:59
  • Media queries can be as important as paragraph breaks in text..... just sayin.... – Scott Sep 28 '16 at 00:47

1 Answers1

1

The answer is that you should have a final width you design for and then eventually center that div in the middle of the page, so that even if the screen gets wider, the only thing that'll get wider is the background surrounding the div. You will need to set width of the div to a fixed width.

Even for larger screens, there gets to be the point where scaling larger fonts, makes the experience to cumbersome to read. If the content were to be scaled to 100% of the browser's width, it would take too long for the reader to read the information desired, hence why centering a fixed div works. It is also conveniently less work for the developer as well.

In terms of smaller screens, you would probably need to scale the div that contains all your information to 100% of the browser's width at a certain breakpoint via media queries.

The end result should look like this:

 100% browser width -->  fixed centered div with a background
(mobile + tablets)      (large screens)
the12
  • 2,395
  • 5
  • 19
  • 37
  • Hi, sorry for the late reply but I didn't really understand what you said, sorry. On large screen I didn't get it, you mean position fixed? I would like at least the homepage looks the same on every large screens . – Matteobikk90 Oct 03 '16 at 20:17
  • What I was saying was that you need to center your main content in the middle of the page to a fixed width, and the only thing that will get bigger is your background. For example, zoom out of the stackoverflow.com page... Notice how the content is in the middle and the only thing that gets bigger is the background (white)? If you just set a width to your main content through a div (should be at a breakpoint that is large enough so all your content fits plus looks the optimal size), then you don't have to write more media queries because as the screen gets bigger, the content will center. – the12 Oct 03 '16 at 20:32
  • And also, as I said before, you don't really need to scale up your content (make fonts bigger, images bigger), because on a big screen you do not want to read across end to end.... It is better on huge screens 23"+ that the content as a percentage of the screen width, is less, because reading from one side of the screen to the other becomes more difficult as the screen size gets larger. – the12 Oct 03 '16 at 20:37
  • ok bit better but still don't got it. When you say fixed width you mean to set like width:100% but I also want a height, that's I think is the problem because 350px on screen 1440px will not be the same as on 1680px or bigger. Thanks – Matteobikk90 Oct 04 '16 at 12:24
  • By fixed I mean non-changing, setting the width to 1200px for example with a div that contains your content. Also, you don't need to plan for height. With media queries you just need to adjust the image/font sizes and you should be fine. – the12 Oct 04 '16 at 15:58