How to use media query for high resolution devices

Question

I have made a simple website which is responsive (more or less). I have used media query @media only screen and (max-width: 699.99px). Now I know that this will activate the css inside it when resolution is less than 699.99px. So it is fine with computer but it doesn't work in mobiles and I know why. But I don't really understand how to solve this. I want this query to work on computer screen (resizing) as well as mobile devices and tablets.

Answer 1

could be an issue with difference between real screen width and actual size

<meta id="viewport" name="viewport" content ="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />

or you can use media-device-width

@media only screen and (max-device-width: 700px) {
  /* Style goes here */
}

but I suggest you to start with mobile-first approach that will definitely solve the issue. basically first you do css for mobile and then you override css for desktop with media queries like

@media only screen and (min-width: 700px){
  /* Style goes here */
}

btw does your device support 699.99px? try using 700 instead

Answer 2

You can use em or rem instead of px. This makes the styling depend on how much content fits on the screen assuming that you also use em/rem to set the sizes of your elements.

Answer 3

First of all if you want make your website responsive it's better to use responsive framework like Bootstrap or foundation.

but if you prefer to do it without framework. try this

you can make 4 media query steps

// Extra small devices (portrait phones, less than 544px)
// No media query since this is the default in Bootstrap

// Small devices (landscape phones, 544px and up)
@media (min-width: 544px) { ... }

// Medium devices (tablets, 768px and up)
@media (min-width: 768px) { ... }

// Large devices (desktops, 992px and up)
@media (min-width: 992px) { ... }

// Extra large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }

and extra guide

/*==========  Mobile First Method  ==========*/

/* Custom, iPhone Retina */ 
@media only screen and (min-width : 320px) {

}

/* Extra Small Devices, Phones */ 
@media only screen and (min-width : 480px) {

}

/* Small Devices, Tablets */
@media only screen and (min-width : 768px) {

}

/* Medium Devices, Desktops */
@media only screen and (min-width : 992px) {

}

/* Large Devices, Wide Screens */
@media only screen and (min-width : 1200px) {

}



/*==========  Non-Mobile First Method  ==========*/

/* Large Devices, Wide Screens */
@media only screen and (max-width : 1200px) {

}

/* Medium Devices, Desktops */
@media only screen and (max-width : 992px) {

}

/* Small Devices, Tablets */
@media only screen and (max-width : 768px) {

}

/* Extra Small Devices, Phones */ 
@media only screen and (max-width : 480px) {

}

/* Custom, iPhone Retina */ 
@media only screen and (max-width : 320px) {

}

I hope this can help