Very confused about responsive CSS media queries

1
votes

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.

2
cssresponsive-designretina-display
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 – Aaron
you can also write pixel ratio MQ without being device-specific - see retina display media queries – Aziz
This is too big of a topic for a clear answer. Unfortunately I would have to suggest you continue learning... just trust that it DOES work if done correctly. – Chuck Le Butt
Oh Chuck I have no doubt that it works when done correctly, that's why I asked the question because everything I've read and followed so far has thrown up the issue I mentioned. So I knew I was missing a big piece of the puzzle somewhere ;) – Grant
@MarcosPérezGude this gets solved using the appropriate viewport meta tag in <head> which is (usually) <meta name="viewport" content="width=device-width, initial-scale=1" /> and is mandatory if you are creating a responsive website – valerio0999

2 Answers

4
votes

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.

1
votes

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