Very confused about responsive CSS media queries -
i don't expect 1 size fits answer here, i've been reading blog after blog on "the best way design site make responsive" , i'm more confused when started.
the overwhelming opinion seems "don't use device specific mq's, use breakpoints instead".
i totally , makes perfect sense, in real world doesn't work.
for example.
design site looks great @ max-width 800px on desktop , well. view on small screen device , looks great. view site on iphone 6 , big , bold @ 800px on desktop tiny due increased resolution of retina devices.
surely way address using device specific mq's - screams isn't idea.
i'm confused now.
am missing part of story here somewhere?
i can't stomach blog right head spinning, thought i'd ask pro's ;)
any pointers addressing specific (retina device) issue appreciated.
this broad topic, in big words, can avoid changing layout hard-pixel relative meassures (em
, rem
, vh/vw
, etc).
if define in html tag:
html { font-size: 62.5%; }
then can use em/rem
meassures , can make this:
@media , (max-width: 80rem) /* mq 800 pixels no matter pixel ratio */
if define font-size example in pixels, pixel ratio of 3, font-size 1/3 of specified. if make in em
same in 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, can see more explanation 62.5%
defined font-size , why it's great feature.
Comments
Post a Comment