+ 2

What are media queries in css?

I searched on internet for creating different webpages on different resolutions like desktop, smartphone, etc. but landed on media queries. I want to know how to use it. I just don't want the code as it in available in w3schools also. I want a guide to help me understand it as it is not available in sololearn course.

css3 web media queries resolutions

22nd Mar 2017, 7:56 AM

Aditya Kshitiz

3 Answers

+ 3

<!DOCTYPE html> <html lang="en-US"> <head> <meta charset="UTF-8"> <title>media query example </title> <link href="test.css" rel="stylesheet" media="screen"> </head> <body> <h1> Aditya Kshitiz </h1> </body> </html> ..............test.css...................... @media (min-width: 500px){ h1{ background: url('image.jpg'); } } ............................................................. Add one image url and try resizing the screen

22nd Mar 2017, 8:35 AM

onekpsc

+ 5

a media query gets the viewport from the device. so you can adjust content according to the device screen size. its basically whats allows responsive design in css.

22nd Mar 2017, 8:03 AM

Andre van Rensburg