Responsive web design Media Queries css

css, html, responsive-design

Solution

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.

Problem

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).

Original source