Post
Ask Question

Make Responsive Web Page Using Media Query in CSS

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.         }  
  8.   
  9.         header {  
  10.             text-align: center;  
  11.         }  
  12.   
  13.         img {  
  14.             border: 7px solid #999;  
  15.         }  
  16.   
  17.         h1 {  
  18.             font-size: 40px;  
  19.         }  
  20.   
  21.         ul {  
  22.             background: rgba(255,8,200,0.5);  
  23.             padding: 10px;  
  24.         }  
  25.   
  26.         li {  
  27.             display: inline;  
  28.             padding: 10px;  
  29.             margin: 10px;  
  30.             font-size: 18px;  
  31.         }  
  32.   
  33.         a {  
  34.             color: #0FF;  
  35.         }  
  36.   
  37.         article {  
  38.             font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;  
  39.             max-width: 500px;  
  40.             margin: 0 auto;  
  41.         }  
  42.   
  43.         @media(max-width:500px) {  
  44.             h1 {  
  45.                 font-size: 18px;  
  46.                 padding: 5px;  
  47.             }  
  48.   
  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.  
  69.   
  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.


Similar Articles