Responsive design can be made with the help of Media queries. Let’s see how media queries can be used to create a more complex responsive design:
<!DOCTYPE html>
<html>
<head>
<title>Responsive Design Example</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
/* styles for default screen size */
body {
background-color: #f2f2f2;
font-size: 16px;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
align-items: center;
}
header, nav, main, aside, footer {
width: 100%;
max-width: 1200px;
margin: 0 auto;
padding: 20px;
}
header {
background-color: #333;
color: #fff;
}
nav {
background-color: #555;
color: #fff;
}
main {
background-color: #fff;
color: #333;
}
aside {
background-color: #eee;
color: #333;
}
footer {
background-color: #ccc;
color: #333;
text-align: center;
}
/* styles for smaller screens */
@media screen and (max-width: 600px) {
header {
font-size: 24px;
}
nav {
flex-direction: column;
align-items: center;
}
aside {
display: none;
}
}
/* styles for larger screens */
@media screen and (min-width: 1200px) {
header {
font-size: 48px;
}
nav {
flex-direction: row;
align-items: center;
}
main {
flex-basis: 70%;
}
aside {
flex-basis: 30%;
display: block;
}
footer {
font-size: 24px;
}
}
</style>
</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="#">Services</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
<main>
<h2>Welcome to our website!</h2>
<p>This is a example of responsive web design and media query example. ....................................................................................................</p>
</main>
<aside>
<h3>Recent Posts</h3>
<ul>
<li><a href="#">Post 1</a></li>
<li><a href="#">Post 2</a></li>
<li><a href="#">Post 3</a></li>
<li><a href="#">Post 4</a></li>
<li><a href="#">Post 5</a></li>
</ul>
</aside>
<footer>
<p>Copyright © 2023</p>
</footer>
</body>
</html>
This example is a simple webpage layout that is designed to be responsive using media queries. The webpage consists of a header, navigation bar, main content area, sidebar, and footer.
The CSS styles are first defined for the default screen size using body, header, nav, main, aside, and footer selectors. These styles set the background color, font size, margins, and padding for each section of the page. Additionally, the display and flex-direction properties are used to create a responsive layout where the sections of the page are arranged in a column.
Next, media queries are used to adjust the styles for smaller and larger screens. The @media rule is used to define styles that apply only when certain conditions are met. In this example, the conditions are based on the width of the screen using max-width and min-width values.
For screens that are 600 pixels wide or less, the header font size is reduced, the nav layout is changed to a column, and the aside section is hidden.
For screens that are 1200 pixels wide or more, the header font size is increased, the nav layout is changed back to a row, and the main and aside sections are adjusted using flex-basis to create a two-column layout. The footer font size is also increased.
Overall, media queries are a powerful tool for creating responsive designs in HTML and CSS. By adjusting styles based on the width of the screen, it’s possible to create webpages that look great on a variety of devices, from small smartphones to large desktop monitors.
Also check WHAT IS GIT ? It’s Easy If You Do It Smart
You can also visite the Git website (https://git-scm.com/)
One Response