html - Media Queries not working at all whatsoever -

i in despair. trying make website , make mobile-friendly , responsive, however, cannot seem kind of media query work @ all! sizes, width , heights in "%/em" , font-sizes in "vw/em". biggest problem that, screen shrinks, text, point becomes eye-straining read! don't see relevant send code if need be, shall send of code (my website still offline , cannot put out there if problem isn't fixed).

here's have tried:

i have tried putting in tag:

<meta name="viewport" content="width=device-width, initial-scale=1"> 

no success when try media query in tab or in separate css stylesheet.

i have tried removing aswell.

i have tried these media queries font-sizes:

@media (max-width: 400px) {     body { font-size: 60%;} }  @media screen , (max-device-width: 800px) {     body {          font-size: 80%;         background-color: blue;       }  }  @media (max-width: 1100px) {     body { font-size: 120%;} } 

i have tried other media queries absolutely nothing changes @ all! doing wrong? what?!! leading many problems! cannot change header according different screen sizes, cannot change display, header links mess, etc.

also, please note beginner , not use javascript, bootstrap or whatever.

thank in advance help!

your queries little weird. perhaps logical constrains can achieve looking for? mean:

@media (max-width: 400px) {     body{         background-color: yellow;     } }  @media (min-width: 401px) , (max-width: 800px){     body {          background-color: blue;       } }  @media (min-width: 801px) , (max-width: 1100px) {     body {          background-color: purple;     } }  @media (min-width: 1101px){     body{         background-color: orange;     } } 

in humble opinion, setting intervals using both min-width , max-width me visualize what's going on better. pen shows colors changing whenever change width. doesn't good, it's started media queries.

edit:

pen contains transitions between colors because cool