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
- <html>
- <head>
- <style>
- body {
- background: #000;
- color: #0F0;
- }
- header {
- text-align: center;
- }
- img {
- border: 7px solid #999;
- }
- h1 {
- font-size: 40px;
- }
- ul {
- background: rgba(255,8,200,0.5);
- padding: 10px;
- }
- li {
- display: inline;
- padding: 10px;
- margin: 10px;
- font-size: 18px;
- }
- a {
- color: #0FF;
- }
- article {
- font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
- max-width: 500px;
- margin: 0 auto;
- }
- </style>
- </head>
- <body>
- <header>
- <img src="CSCLogo.png" width="200"><br>
- <h2>Founder :-</h2>
- <h1>MR. MAHESH CHAND</h1>
- <ul>
- <li><a href="#">About Me</a></li>
- <li><a href="#">Contact Me</a></li>
- <li><a href="#">Follow Me</a></li>
- </ul>
- </header>
- <article>
- Mahesh Chand is founder of C# Corner. C# Corner founded in 1999 is a FREE member contributions based open platform for developers to solve problems, learn new technology and hang out.
- Mahesh has been awarded 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.
- </article>
- </body>
- </html>
Output on computer system
Now If we get the output in a mobile device then:
Here in the mobile device the content is not at the right position.
Now we use media query of CSS
- <html>
- <head>
- <style>
- body {
- background: #000;
- color: #0F0;
- }
-
- header {
- text-align: center;
- }
-
- img {
- border: 7px solid #999;
- }
-
- h1 {
- font-size: 40px;
- }
-
- ul {
- background: rgba(255,8,200,0.5);
- padding: 10px;
- }
-
- li {
- display: inline;
- padding: 10px;
- margin: 10px;
- font-size: 18px;
- }
-
- a {
- color: #0FF;
- }
-
- article {
- font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
- max-width: 500px;
- margin: 0 auto;
- }
-
- @media(max-width:500px) {
- h1 {
- font-size: 18px;
- padding: 5px;
- }
-
- li {
- display: block;
- padding: 5px;
- }
- }
- </style>
- </head>
- <body>
- <header>
- <img src="CSCLogo.png" width="200"><br>
- <h2>Founder :-</h2>
- <h1>MR. MAHESH CHAND</h1>
- <ul>
- <li><a href="#">About Me</a></li>
- <li><a href="#">Contact Me</a></li>
- <li><a href="#">Follow Me</a></li>
- </ul>
- </header>
- <article>
- Mahesh Chand is founder of C# Corner. C# Corner founded in 1999 is a FREE member contributions based open platform for developers to solve problems, learn new technology and hang out.
-
- Mahesh has been awarded 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.
- </article>
- </body>
- </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.