Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to use media queries in a mobile-first approach in HTML?
The mobile-first approach is a responsive web design strategy where you start by designing and coding for mobile devices first, then progressively enhance the layout for larger screens using CSS media queries. This approach ensures better performance on mobile devices and creates a solid foundation for scalability across all screen sizes.
In mobile-first design, you write base CSS styles for small screens (mobile devices) and then use media queries with min-width breakpoints to add or override styles for tablets, desktops, and larger displays. This approach is opposite to the desktop-first method, where you start with desktop styles and use max-width media queries to scale down.
Why Choose Mobile-First?
The mobile-first approach offers several advantages over desktop-first design
Better Performance Mobile devices download only the CSS they need, without loading unnecessary desktop styles.
Progressive Enhancement You build up from a simple, functional base rather than stripping down complex layouts.
Mobile Usage Priority With mobile traffic exceeding desktop usage globally, prioritizing mobile experience makes business sense.
Easier Maintenance It's simpler to add complexity than to remove it when adapting layouts.
Syntax
The basic syntax for mobile-first media queries uses min-width breakpoints
/* Mobile-first base styles */
.element {
property: mobile-value;
}
/* Tablet and larger screens */
@media screen and (min-width: 768px) {
.element {
property: tablet-value;
}
}
/* Desktop and larger screens */
@media screen and (min-width: 1024px) {
.element {
property: desktop-value;
}
}
Common Breakpoints for Mobile-First
Here are the standard breakpoints used in mobile-first responsive design
| Device Type | Screen Width | Media Query |
|---|---|---|
| Mobile (base) | 320px - 767px | No media query needed |
| Tablet | 768px - 1023px | @media (min-width: 768px) |
| Desktop | 1024px - 1199px | @media (min-width: 1024px) |
| Large Desktop | 1200px+ | @media (min-width: 1200px) |
Mobile-First Implementation Steps
Follow these steps to implement mobile-first responsive design
Step 1 Add the viewport meta tag to enable responsive behavior on mobile devices.
Step 2 Write base CSS styles for mobile devices (smallest screen size) first.
Step 3 Use
@media (min-width: value)queries to progressively enhance styles for larger screens.Step 4 Test across different devices to ensure smooth responsive transitions.
Basic Mobile-First Example
Following example demonstrates a simple mobile-first layout with a card component
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mobile-First Card Layout</title>
<style>
/* Mobile-first base styles */
.container {
padding: 15px;
max-width: 100%;
}
.card {
background: #f4f4f4;
padding: 20px;
margin-bottom: 20px;
border-radius: 8px;
text-align: center;
}
.card h3 {
color: #333;
font-size: 18px;
margin-bottom: 10px;
}
.card p {
font-size: 14px;
line-height: 1.5;
color: #666;
}
/* Tablet styles */
@media screen and (min-width: 768px) {
.container {
padding: 30px;
max-width: 1200px;
margin: 0 auto;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
}
.card {
margin-bottom: 0;
}
.card h3 {
font-size: 20px;
}
.card p {
font-size: 16px;
}
}
/* Desktop styles */
@media screen and (min-width: 1024px) {
.container {
grid-template-columns: repeat(3, 1fr);
gap: 30px;
}
.card {
padding: 30px;
}
.card h3 {
font-size: 22px;
}
}
</style>
</head>
<body style="font-family: Arial, sans-serif; margin: 0; background: #fff;">
<div class="container">
<div class="card">
<h3>HTML5</h3>
<p>Learn the fundamentals of HTML5 and semantic markup for modern web development.</p>
</div>
<div class="card">
<h3>CSS3</h3>
<p>Master CSS3 features including flexbox, grid, and animations for responsive design.</p>
</div>
<div class="card">
<h3>JavaScript</h3>
<p>Build interactive web applications with modern JavaScript and ES6+ features.</p>
</div>
</div>
</body>
</html>
The layout shows one column on mobile, two columns on tablets, and three columns on desktops. The padding and font sizes also increase progressively for better readability on larger screens.
Advanced Mobile-First Example
Following example shows a more complex layout with navigation, hero section, and content areas
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mobile-First Website Layout</title>
<style>
/* Mobile-first base styles */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: Arial, sans-serif;
line-height: 1.6;
color: #333;
}
.header {
background: #2c3e50;
color: white;
padding: 1rem;
text-align: center;
}
.nav ul {
list-style: none;
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.nav a {
color: white;
text-decoration: none;
padding: 0.5rem;
display: block;
background: #34495e;
border-radius: 4px;
}
.hero {
background: #3498db;
color: white;
padding: 2rem 1rem;
text-align: center;
}
.hero h1 {
font-size: 24px;
margin-bottom: 1rem;
}
.content {
padding: 1rem;
display: flex;
flex-direction: column;
gap: 1rem;
}
.main {
background: #ecf0f1;
padding: 1rem;
border-radius: 4px;
}
.sidebar {
background: #f8f9fa;
padding: 1rem;
border-radius: 4px;
}
/* Tablet styles */
@media screen and (min-width: 768px) {
.header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1rem 2rem;
}
.nav ul {
flex-direction: row;
}
.hero {
padding: 3rem 2rem;
}
.hero h1 {
font-size: 32px;
}
.content {
padding: 2rem;
flex-direction: row;
max-width: 1200px;
margin: 0 auto;
}
.main {
flex: 2; 
286 Views
