How To Use CSS3 Media Queries To Create a website mobile friendly

How To Use CSS3 Media Queries To Create a website mobile friendly

  08:02    Unknown

---

What are media queries ?
Media queries are CSS technique introduced in CSS3 and used for responsive web design it use @media to include a block of css properties. 
How to use ?
We can set the set the screen size by using @media 
Example:
If the screen size web browser is smaller then 667px , the background color of body will be yellow:

/* Less than 667px */

See the screenshot for code.

Example #2:
If the screen size web browser is larger then 667px , the background color of body will be red:

/* grater than 667px */

See the screenshot for code.

Example #3:
If the screen size web browser is in between 480px and 667px , the background color of body will be yellow:

/* No greater than 667px, no less than 480px */

See the screenshot for code.