Responsive web design creates web pages that will look great and user friendly on all devices. It is responsible for will automatically adjust for different screen sizes ,devices and viewports.
To create a responsive website, add the <meta> tag to all your web pages:
Syntax:
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
Below is the example for responsive design :
Example:
HTML file ::
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
<!DOCTYPE html> <html> <head> <title>Responsive Design Example</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <header> <h1>Responsive Design Example</h1> </header> <nav> <ul> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Contact us</a></li> </ul> </nav> <main> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed auctor, magna non suscipit tincidunt, nibh magna aliquam risus, euismod aliquet risus augue et metus. Sed malesuada, nibh ac tincidunt placerat, augue augue congue ante, id bibendum dolor odio eget est.</p> </main> <footer> <p>Copyright ©2021 Responsive Design Example</p> </footer> </body> </html> |
CSS file ::
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 |
body { margin: 0; font-family: Arial, sans-serif; } header { background-color: #f1f1f1; padding: 20px; text-align: center; } nav { background-color: #333; color: #fff; padding: 10px; } nav ul { list-style-type: none; margin: 0; padding: 0; overflow: hidden; } nav li { float: left; } nav a { color: #fff; text-align: center; padding: 14px 16px; text-decoration: none; } nav a:hover { background-color: #ddd; color: #333; } main { padding: 20px; } footer { background-color: #f1f1f1; padding: 10px; text-align: center; } /* Responsive design */ @media (max-width: 600px) { nav, main, footer { width: 100%; text-align: center; } nav li { float: none; } } |
This layout will adjust itself to the screen size of the device it’s being viewed on. You can use media queries to apply different styles depending on the screen size.