Do I need to add mediaqueries for every width range?

Question

I'm reading some books and trying to create a responsive layout but still don't know how to cope with random windows sizes. I know there's a difference between devices and screen, I just can't figure out why can't control display when resizing the browser window.

It that a structure issue, wrong css code or I'm forgetting something?! I need to add mediaqueries for variable widths ranges?

An example: I set most sizes for devices (1204px, 768px, etc) works ok, but variable widths seems to act strange. I added then a mediaqueries such @media screen and (max-width: 1100px){ ... } but still I get issues on 720px or 620px etc.

I use display snipets from here.

Thanks for any help!

You might want to read this http://www.designbyfront.com/workinprogress/article/the-goldilocks-approach-to-responsive-design You probably don't need more media queries, but less and not `px`-based, but `em`-based. — Ana, Aug 20 '12 at 02:08

score 1 · Accepted Answer · edited May 23 '17 at 11:48

1

Silly me, I just found out that my code was messed: I had mediaqueries on wrong order so classes end up being ignored. Please refer to this topic.

Thanks you all!

edited May 23 '17 at 11:48

Community

1
1

answered Aug 20 '12 at 05:09

Diana

330
4
18

Do I need to add mediaqueries for every width range?

1 Answers1