Responsive web design Media Queries css

Question

Here i'm going to design responsive website but i have small doubts about the Mobile & Desktop resolutions using media queries.

My client his PC resolution is 1920*1080
My development machine resolution is 1366*768

Here i use my media query

   /* Media queries */
@media screen and (max-width: 1920px) {
body{
width:1000px;
margin:0 auto;
}
 //some coding here
}

But the thing is using this media query it's not working with my Client's resolution.

The Second thing is i need to show it in mmobile.
How to get resolution of Mobiles?
How to set the max-width of media query for mobile device(Not tablet).

His full window resolution is 1920 x 1080, but is his browser window that large? That's what the media-query looks at. — brouxhaha
Not to discourage you, but there are also lots of pre-existing frameworks like bootstrap and zurb foundation - just using one of them will save you a lot of time. — Sinister Beard
On lexus.ca, we defined 768px and under as mobile 1024px and under as tablet and anything above 1024px are desktop. This only affects how the page displays itself. You can view mobile display from a browser if you resize the window to that size. Hope this helps, the resolution of the PC is not what the media query looks at. The media query looks at browser width which could vary. not that many people have full width browser windows on a 1920 screen — Huangism
@user850307 we don't target devices because that will limit you in the future. We just target the width. So it is possible to see the different views on any browser as long as the width fits. 768 is where we turn the site into a mobile view, but it can be seen on desktop — Huangism

jmoody1988 jmoody1988 · Accepted Answer · 2014-02-03T18:45:27

It's difficult to get an exact match of your client's resolution because of a couple of issues.

DFDatabaseAdmin is correct that just because you are targeting 1920x1080, doesn't mean that's the resolution that's going to be available. The scrollbar, borders of the window and any addons that take space on the browser's viewable area of the website (the "viewport" or "screen"), then you actually have less than 1920x1080.

A better solution for responsive is to always account for 15-20px of space for each media query, so that the scrollbar and window borders don't prevent that magic width from being reached. So if I want to target 1024px width and lower, I would specify 1010px as teh max-width.

As for your client's PC, you could do a media query on his min-width, rather than max. So instead of this:

  @media screen and (max-width: 1920px){
      #code here
  }

You could use this:

  @media screen and (min-width: 1900px){
      #code here
  }

When I build responsive websites, I usually use foundation from Zurb as my responsive framework to save a bunch of time, but if you're wanting a full custom experience, then coding responsive by hand is the way to do. For my responsive websites, I use 1010px (desktop), 780px (tablet), and 600px (mobile). However, don't be surprised if you may need to create your own side queries to change certain areas earlier or later though. Hope this helps.

Responsive web design Media Queries css

2 Answers