Introduction

Hello programmers, we are all familiar with the basics of HTML5 and CSS3 but when we make a web page using only HTML and CSS (without media query) then the site is not responsive.
What is a responsive web page? A responsive web page means the user interface or front end of the web page looks the same, whether we use a computer system, a tablet or a mobile device.
Code without CSS media query
  1. <html>
  2. <head>
  3. <style>
  4. body {
  5. background: #000;
  6. color: #0F0;
  7. }
  8. header {
  9. text-align: center;
  10. }
  11. img {
  12. border: 7px solid #999;
  13. }
  14. h1 {
  15. font-size: 40px;
  16. }
  17. ul {
  18. background: rgba(255,8,200,0.5);
  19. padding: 10px;
  20. }
  21. li {
  22. display: inline;
  23. padding: 10px;
  24. margin: 10px;
  25. font-size: 18px;
  26. }
  27. a {
  28. color: #0FF;
  29. }
  30. article {
  31. font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
  32. max-width: 500px;
  33. margin: 0 auto;
  34. }
  35. </style>
  36. </head>
  37. <body>
  38. <header>
  39. <img src="CSCLogo.png" width="200"><br>
  40. <h2>Founder :-</h2>
  41. <h1>MR. MAHESH CHAND</h1>
  42. <ul>
  43. <li><a href="#">About Me</a></li>
  44. <li><a href="#">Contact Me</a></li>
  45. <li><a href="#">Follow Me</a></li>
  46. </ul>
  47. </header>
  48. <article>
  49. Mahesh Chand is the founder of C# Corner. C# Corner founded in 1999 is a FREE member contribution based open platform for developers to solve problems, learn new technology and hang out.
  50. Mahesh has been awarded the prestigious Microsoft MVP Award for 9 consecutive years for his contributions to the developer community. Mahesh is also an author of several programming books. Mahesh authored and published his first book A Programmer's Guide to ADO.NET in C# with APress at the age of 25. Since then, mahesh went on to author several more .NET programming books.
  51. </article>
  52. </body>
  53. </html>
Output on the computer system
Now If we get the output in a mobile device then:
Here in the mobile device, the content is not in the right position.
Now we use media query of CSS
  1. <html>
  2. <head>
  3. <style>
  4. body {
  5. background: #000;
  6. color: #0F0;
  7. }
  9. header {
  10. text-align: center;
  11. }
  13. img {
  14. border: 7px solid #999;
  15. }
  17. h1 {
  18. font-size: 40px;
  19. }
  21. ul {
  22. background: rgba(255,8,200,0.5);
  23. padding: 10px;
  24. }
  26. li {
  27. display: inline;
  28. padding: 10px;
  29. margin: 10px;
  30. font-size: 18px;
  31. }
  33. a {
  34. color: #0FF;
  35. }
  37. article {
  38. font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
  39. max-width: 500px;
  40. margin: 0 auto;
  41. }
  43. @media(max-width:500px) {
  44. h1 {
  45. font-size: 18px;
  46. padding: 5px;
  47. }
  49. li {
  50. display: block;
  51. padding: 5px;
  52. }
  53. }
  54. </style>
  55. </head>
  56. <body>
  57. <header>
  58. <img src="CSCLogo.png" width="200"><br>
  59. <h2>Founder :-</h2>
  60. <h1>MR. MAHESH CHAND</h1>
  61. <ul>
  62. <li><a href="#">About Me</a></li>
  63. <li><a href="#">Contact Me</a></li>
  64. <li><a href="#">Follow Me</a></li>
  65. </ul>
  66. </header>
  67. <article>
  68. Mahesh Chand is the founder of C# Corner. C# Corner founded in 1999 is a FREE member contribution based open platform for developers to solve problems, learn new technology and hang out.
  70. Mahesh has been awarded the prestigious Microsoft MVP Award for 9 consecutive years for his contributions to the developer community. Mahesh is also an author of several programming books. Mahesh authored and published his first book A Programmer's Guide to ADO.NET in C# with APress at the age of 25. Since then, mahesh went on to author several more .NET programming books.
  71. </article>
  72. </body>
  73. </html>
Now the output in the mobile devices
So we can say that the media query of CSS is very, very helpful to make responsive web pages.