---
title: "Creating Responsive Designs with Media Queries"
description: "Creating Responsive Designs with Media Queries"
author: "Sanjay Goenka"
published: 2024-06-05
updated: 2024-06-05
canonical: https://www.mindstick.com/forum/160674/creating-responsive-designs-with-media-queries
category: "css-css3"
tags: ["css-css3", "css"]
reading_time: 4 minutes
---
# Creating Responsive Designs with Media Queries
Creating Responsive Designs with [Media Queries](https://www.mindstick.com/blog/469/media-queries-using-css3)
## Replies
### Reply by Ravi Vishwakarma
Creating [responsive designs](https://www.mindstick.com/tag/article/%20responsive-design) with [media](https://www.mindstick.com/articles/44257/the-impact-of-social-media-on-lawsuits) [queries](https://www.mindstick.com/forum/33678/sub-queries-in-sql-server) involves adjusting the layout and styles of a webpage based on the characteristics of the device or viewport size. Media queries allow you to apply CSS rules based on conditions such as screen width, height, orientation, and more. Here's how you can create responsive designs using media queries:
```css
/* Default styles */
.element {
/* Styles common to all screen sizes */
}
/* Media query for small screens */
@media screen and (max-width: 600px) {
.element {
/* Styles for screens up to 600px wide */
}
}
/* Media query for medium screens */
@media screen and (min-width: 601px) and (max-width: 1024px) {
.element {
/* Styles for screens between 601px and 1024px wide */
}
}
/* Media query for large screens */
@media screen and (min-width: 1025px) {
.element {
/* Styles for screens wider than 1024px */
}
}
```
### Common Media Query Features:
**Screen Width**: Adjust styles based on the width of the viewport.
```css
@media screen and (max-width: 768px) { /* Styles for screens up to 768px wide */ }
```
**Orientation**: Apply styles based on the orientation of the device (landscape or portrait).
```css
@media screen and (orientation: landscape) { /* Landscape styles */ }
```
**Device Pixel Ratio (Retina Displays)**: Adjust styles based on the device's pixel density.
```css
@media screen and (min-resolution: 2dppx) { /* Styles for high-density displays */ }
```
**Device Type**: Target specific types of devices (e.g., screen, print).
```css
@media print { /* Styles for printing */ }
```
**Combining Conditions**: Combine multiple conditions using logical operators (`and`, `or`, `not`).
```css
@media screen and (min-width: 768px) and (max-width: 1024px) { /* Styles for tablets */ }
```
###
### Best Practices:
**Mobile-first Approach**: Start with styles for small screens and progressively enhance for larger screens using media queries.
**Use Relative Units**: Utilize percentages, ems, or rems for sizing elements to ensure flexibility across different screen sizes.
**Test Across Devices**: Test your responsive designs on various devices and screen sizes to ensure they render correctly.
**Prioritize Content**: Ensure that essential content is accessible and readable on all screen sizes, prioritizing usability over aesthetics.
**Graceful Degradation**: Design with the concept that older browsers or devices may not support media queries, and ensure that your content remains functional and accessible in such cases.
By using media queries effectively, you can create designs that adapt gracefully to different screen sizes and devices, providing users with an optimal viewing experience across a wide range of devices.
## Example -
## HTML(index.html)
```html
Responsive Design Example