When building responsive websites, it is important to make sure that our design looks good on all devices, from large desktop screens to small mobile phones. Media queries in CSS are a powerful tool that helps in making responsive websites. In this article, we are going to learn about how to use media queries to handle common device breakpoints, which ensures that our website looks great on any screen size.
Media queries are a feature in CSS that allows us to apply different styles to different devices based on their characteristics, such as screen width, height, orientation, and resolution. By using media queries, we can make your website responsive, i.e. it can adapt to different screen sizes. Breakpoints are specific screen widths at which we want our CSS styles to change to better fit the screen. Common breakpoints are based on standard device widths such as mobile phones, tablets, and desktops.
Below are different approaches to Using Media Queries for Common Device Breakpoints:
Table of Content
Mobile-First Approach
In the mobile-first approach, we start by writing CSS for the smallest screen sizes first and then use media queries to add styles for larger screens.
Syntax:
/* Default styles for mobile devices */
body {
font-size: 16px;
}
/* Styles for tablets (screen width 768px and above) */
@media (min-width: 768px) {
body {
font-size: 18px;
}
}
/* Styles for desktops (screen width 1024px and above) */
@media (min-width: 1024px) {
body {
font-size: 20px;
}
}
Example: In this example, the body font size and background color change based on the screen width, starting with a basic style for mobile devices and adjusting for larger screens.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width,
initial-scale=1.0">
<title>Mobile-First Approach</title>
<style>
/* Default styles for mobile devices */
body {
font-size: 16px;
background-color: #f0f0f0;
}
/* Styles for tablets (screen width 768px and above) */
@media (min-width: 768px) {
body {
font-size: 18px;
background-color: #e0e0e0;
}
}
/* Styles for desktops (screen width 1024px and above) */
@media (min-width: 1024px) {
body {
font-size: 20px;
background-color: #d0d0d0;
}
}
</style>
</head>
<body>
<p>Resize the browser window
to see the changes in font size and background
color based on the device's width.</p>
</body>
</html>
Output:
Desktop-First Approach
The desktop-first approach is the opposite of the mobile-first approach. Here, you start with styles for larger screens and then use media queries to adjust the layout for smaller devices.
Syntax:
/* Default styles for desktops */
body {
font-size: 20px;
}
/* Styles for tablets (screen width below 1024px) */
@media (max-width: 1024px) {
body {
font-size: 18px;
}
}
/* Styles for mobile devices (screen width below 768px) */
@media (max-width: 768px) {
body {
font-size: 16px;
}
}
Example: In this approach, the styles are defined for larger screens first and then adjusted for smaller screens using max-width media queries.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width,
initial-scale=1.0">
<title>Desktop-First Approach</title>
<style>
/* Default styles for desktops */
body {
font-size: 20px;
background-color: #d0d0d0;
}
/* Styles for tablets (screen width below 1024px) */
@media (max-width: 1024px) {
body {
font-size: 18px;
background-color: #e0e0e0;
}
}
/* Styles for mobile devices (screen width below 768px) */
@media (max-width: 768px) {
body {
font-size: 16px;
background-color: #f0f0f0;
}
}
</style>
</head>
<body>
<p>Resize the browser
window to see the changes
in font size and background
color based on the device's width.</p>
</body>
</html>
Output:
Fluid Grid Layouts
A fluid grid layout combines media queries with a flexible grid system to create a layout that adapts smoothly to any screen size.
Syntax:
.container {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
gap: 10px;
}
@media (max-width: 1024px) {
.container {
grid-template-columns: 1fr 1fr 1fr;
}
}
@media (max-width: 768px) {
.container {
grid-template-columns: 1fr 1fr;
}
}
@media (max-width: 480px) {
.container {
grid-template-columns: 1fr;
}
}
Example: This example uses a CSS Grid to create a fluid layout that adjusts the number of columns based on the screen size. As the screen width decreases, the layout shifts from four columns to one.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width,
initial-scale=1.0">
<title>Fluid Grid Layout</title>
<style>
.container {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
gap: 10px;
}
.item {
background-color: #ccc;
padding: 20px;
text-align: center;
}
@media (max-width: 1024px) {
.container {
grid-template-columns: 1fr 1fr 1fr;
}
}
@media (max-width: 768px) {
.container {
grid-template-columns: 1fr 1fr;
}
}
@media (max-width: 480px) {
.container {
grid-template-columns: 1fr;
}
}
</style>
</head>
<body>
<div class="container">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
<div class="item">Item 4</div>
</div>
</body>
</html>
Output:
Conclusion
Using media queries for common device breakpoints is essential for creating responsive designs that look good on any screen size. After understanding all above mentioned approaches such as the mobile-first and desktop-first approaches, along with fluid grid layouts, we can ensure that our website is both functional and visually appealing across all devices.