In this tutorial, we'll explore responsive web design, an essential skill for developing websites that look great on all devices, from desktops to smartphones. The key of responsive design is media queries, which allow you to apply different styles depending on the screen size or device features.
What Are Media Queries?
Media queries are a CSS technique that allows you to apply styles based on the characteristics of the device, such as screen size, orientation, and resolution. They are primarily used for responsive design to adjust the layout and elements of a web page for different devices, such as desktops, tablets, and smartphones.
Synatx:
@media (condition) {
/* CSS rules */
}
Why Responsive Design is important
- User Experience: Enhances usability by ensuring your content is accessible and easy to navigate on any device.
- SEO: Google and other search engines prioritize mobile-friendly websites in search rankings.
- Cost-Efficiency: Saves time and resources by maintaining a single site that works across all platforms.
Example:
@media screen and (max-width: 768px) {
body {
background-color: lightblue;
}
}
This media query changes the background color to light blue on screens that are 768 pixels wide or smaller.
Combining Media Queries
You can combine multiple conditions to target specific scenarios.
@media screen and (min-width: 600px) and (max-width: 1200px) {
.container {
padding: 20px;
}
}
This targets screens between 600px and 1200px wide, applying padding to the .container class.
Common Breakpoints
Breakpoints are the points at which your website’s layout changes based on the screen size.
- 320px: Small devices (smartphones in portrait mode)
- 768px: Tablets
- 1024px: Small desktops or tablets in landscape mode
- 1200px: Large desktops
Creating a Responsive Layout
Let’s create a simple responsive layout that adjusts based on the screen size.
HTML:
<div class="container">
<header>Header</header>
<nav>Navigation</nav>
<main>Main Content</main>
<aside>Sidebar</aside>
<footer>Footer</footer>
</div>
CSS:
.container {
display: grid;
grid-template-columns: 1fr 3fr;
grid-gap: 10px;
}
header, nav, main, aside, footer {
padding: 20px;
background-color: #f4f4f4;
border: 1px solid #ddd;
}
/* Media Query for Tablets and Smaller Devices */
@media screen and (max-width: 768px) {
.container {
grid-template-columns: 1fr;
}
nav, aside {
display: none; /* Hide navigation and sidebar on smaller
screens */
}
}
In this example:
- The layout uses CSS Grid to create a two-column layout on larger screens, with the sidebar alongside the main content.
- A media query at 768px is used to switch to a single-column layout, hiding the navigation and sidebar on smaller screens.
Responsive Images
In addition to responsive layouts, you should also ensure your images scale appropriately on different devices. Use the max-width property to make images responsive.
Example:
img {
max-width: 100%;
height: auto;
}
Articles you may found Useful
Ream Section using HTML and CSS
Top 3 Free Web development courses
If you like, you can subscribe my youtube channel. I create awesome web contents. Subscribe
Thanks For reading.
