Grant February 2016

Very confused about responsive CSS media queries

I don't expect a one size fits all answer here, but I've been reading blog after blog on "the best way to design a site to make it responsive" and I'm more confused now than when I started.

The overwhelming opinion seems to be "Don't use device specific MQ's, use breakpoints instead".

I totally get this and it makes perfect sense, but in the real world it simply doesn't work.

For example.

Design a site that looks great at max-width 800px on a desktop and all is well. View it on a small screen device and it also looks great. But view that site on an iPhone 6 and everything that was big and bold at 800px on the desktop is tiny due to the increased resolution of retina devices.

Surely the only way to address this is by using device specific MQ's - which everybody screams isn't a good idea.

I'm really confused now.

Am I missing part of the story here somewhere?

I can't stomach another blog right now as my head is spinning, so I thought I'd ask the pro's ;)

Any pointers for addressing this specific (retina device) issue would be greatly appreciated.

Answers


Aaron February 2016

Add the viewport meta between your <head> tags

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />

Your website is scaling to the devices width


Marcos Pérez Gude February 2016

This is a very broad topic, but in big words, you can avoid it changing your layout from hard-pixel to relative meassures (em, rem, vh/vw, etc).

If you define this in the HTML tag:

 html {
    font-size: 62.5%;
 }

Then you can use em/rem meassures and you can make this:

 @media all and (max-width: 80rem) /* MQ 800 pixels no matter pixel ratio */

If you define a font-size for example in pixels, with a pixel ratio of 3, the font-size will be a 1/3 of the specified. But if you make in em it will be the same in all devices.

Example in hard-pixels:

div { 
   width: 300px;
}
  • Device pixel ratio: 1 > Result: 300px;
  • Device pixel ratio: 2 > Result: 150px;
  • Device pixel ratio: 3 > Result: 100px;

Example in relative measures

div { 
    width: 30rem;
}
  • Device pixel ratio: 1 > Result: 300px;
  • Device pixel ratio: 2 > Result: 300px;
  • Device pixel ratio: 3 > Result: 300px;

Good luck

EDIT

In comments, you can see more explanation about 62.5% defined font-size and why it's a great feature.

Post Status

Asked in February 2016
Viewed 3,180 times
Voted 14
Answered 2 times

Search




Leave an answer