gaspersic/freeCodeCamp
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Reorganized draft, added query examples (#28770)

Browse Source
This commit is contained in:
Christine Duane
2018-11-23 15:57:03 -08:00
committed by Randell Dawson
parent 63b500f8a1
commit 08f7e2a87e
1 changed files with 27 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

42
guide/english/css/media-queries/index.md
View File

@ -1,30 +1,42 @@
---
title: Media Queries
---
#### Suggested Reading:
<!-- Please add any articles you think might be helpful to read before writing the article -->
[Using media queries - MDN web docs](https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries)
Also see the <a href='https://github.com/freeCodeCamp/freeCodeCamp/blob/staging/seed/challenges/01-responsive-web-design/responsive-web-design.json' target='_blank' rel='nofollow'>Responsive Web Design Principles</a> section on Beta
#### Draft of Article:
<!-- Please add your working draft below in GitHub-flavored Markdown -->
## Media Queries
Media queries are sets of rules that define CSS properties. You can set media queries to change the appearance of your content based on how your content is viewed.
Media queries can determine your content's appearance in different displays. Some examples of different displays are: images on a computer screen, text in print, or web pages in an audio screenreader.
In web pages, some elements may not display consistently across different screen sizes. You can use media queries to set special rules for small and larger screens.
Here is an example of a media query that sets the size of body text on a phone screen:
Media queries are essential to [responsive web design](https://guide.freecodecamp.org/html/responsive-web-design). Best practice dictates websites should be designed for mobile first. Meaning, mobile styles should be written first, then scaling up to larger screens.
```css
@media screen and (max-width: 450px) {
body {
font-size: 12px;
### Examples
The h1 is set to 18 pixels initially, then increased when the screen is width expands to 640px (tablet) and then again at 1024px (desktop).
```
h1 {
font-size: 18px;
}
// Medium and up
@media screen and (min-width: 640px) {
h1 {
font-size: 20px;
}
}
// Large and up
@media screen and (min-width: 1024px) {
h1 {
font-size: 30px;
}
}
```
This media query stipulates that for screen sizes up to 450 pixels in width, the body text should display in a 12px font size.
Media queries can be helpful in [responsive web design](https://guide.freecodecamp.org/html/responsive-web-design).
#### Suggested Reading:
<!-- Please add any articles you think might be helpful to read before writing the article -->
[Using media queries - MDN web docs](https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries)
Also see the <a href='https://github.com/freeCodeCamp/freeCodeCamp/blob/staging/seed/challenges/01-responsive-web-design/responsive-web-design.json' target='_blank' rel='nofollow'>Responsive Web Design Principles</a> section on Beta