Related Topics
HTML
Data Structure
CSS
<div class="container">
<h1 class="title">Responsive Design</h1>
<p class="description">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
CSS:
.container {
/* Common styles for all devices */
}
.title {
/* Common styles for all devices */
}
.description {
/* Common styles for all devices */
}
/* Media query for mobile devices */
@media (max-width: 767px) {
.container {
/* Styles specific to mobile devices */
}
.title {
/* Styles specific to mobile devices */
}
.description {
/* Styles specific to mobile devices */
}
}
/* Media query for tablet devices */
@media (min-width: 768px) and (max-width: 1023px) {
.container {
/* Styles specific to tablet devices */
}
.title {
/* Styles specific to tablet devices */
}
.description {
/* Styles specific to tablet devices */
}
}
/* Media query for desktop devices */
@media (min-width: 1024px) {
.container {
/* Styles specific to desktop devices */
}
.title {
/* Styles specific to desktop devices */
}
.description {
/* Styles specific to desktop devices */
}
}
In the above example, we have a container with a title and a description. We define different styles for mobile, tablet, and desktop devices using media queries:
Media query for mobile devices:
The
@media (max-width: 767px)media query targets screens with a maximum width of 767 pixels, typically representing mobile devices.Within this media query, we define specific styles for the
.container,.title, and.descriptionclasses to adapt the layout and appearance for mobile devices.
Media query for tablet devices:
The
@media (min-width: 768px) and (max-width: 1023px)media query targets screens with a width between 768 pixels and 1023 pixels, typically representing tablets.Within this media query, we define specific styles for the
.container,.title, and.descriptionclasses to adjust the layout and appearance for tablet devices.
Media query for desktop devices:
The
@media (min-width: 1024px)media query targets screens with a minimum width of 1024 pixels, typically representing desktop devices.Within this media query, we define specific styles for the
.container,.title, and.descriptionclasses to customize the layout and appearance for desktop devices.
By using media queries and targeting specific device characteristics, you can define different styles for mobile, tablet, and desktop devices, ensuring an optimized and tailored user experience across various devices.
Popular Category
Topics for You
HTML
Data Structure
Go through our study material. Your Job is awaiting.