+ 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.

22nd Mar 2017, 7:56 AM
Aditya Kshitiz
Aditya Kshitiz - avatar
3 ответов
+ 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
Andre van Rensburg - avatar
+ 3
OK thanks for your answer can you help me with an example code now.
22nd Mar 2017, 8:04 AM
Aditya Kshitiz
Aditya Kshitiz - avatar