gitadmin/freeCodeCamp
1
0
Fork 0
mirror of https://github.com/freeCodeCamp/freeCodeCamp.git synced 2026-05-28 18:26:54 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(curriculum): Add interactive examples to How Do Media Queries Work, and What Are Some Common Media Types and Features? lesson (#63133)

Browse Source
This commit is contained in:
Kannan
2025-10-28 15:44:43 +05:30
committed by GitHub
parent 867eabe725
commit 8fe91b907b
1 changed files with 15 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files
curriculum/challenges/english/blocks/lecture-best-practices-for-responsive-web-design/672cf05c3ad533eabe1e8197.md
+15 -1
View File
@@ -5,7 +5,7 @@ challengeType: 19
dashedName: how-do-media-queries-work
---
# --description--
# --interactive--
Media queries are a fundamental component of responsive web design, allowing developers to apply different styles based on the characteristics of the user's device or browser. They provide a way to tailor the presentation of content to a variety of devices without changing the content itself.
@@ -99,6 +99,18 @@ When working with media queries, it's important to consider the cascade. Media q
In practice, media queries are often used to create responsive layouts. A common pattern is to define a base style for mobile devices and then use media queries to enhance the layout for larger screens:
:::interactive_editor
```html
<link rel="stylesheet" href="styles.css">
<div class="container">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam.</p>
<p>Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta.</p>
<p>Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
</div>
```
```css
/* Base styles for mobile */
.container {
@@ -122,6 +134,8 @@ In practice, media queries are often used to create responsive layouts. A common
}
```
:::
This approach, known as "mobile-first" responsive design, ensures that the base styles are suitable for mobile devices, with enhancements added for larger screens.
In conclusion, media queries are a powerful tool in CSS that allow for the creation of responsive, adaptable web designs. By understanding how to use different media types and features, developers can create websites that provide optimal user experiences across a wide range of devices and preferences. As web technologies continue to evolve, staying updated with new media features can help in creating more nuanced and user-friendly responsive designs.