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

Fix typos and clarify explanations (#30546)

Browse Source 
* Fix typos and clarify explanations

* Make edits based on review

* Update guide/english/css/css3-media-queries/index.md

Co-Authored-By: amyyf <ava447@gmail.com>
This commit is contained in:
Amy
2019-03-04 16:07:08 -05:00
committed by Randell Dawson
parent 117c10b8de
commit 704f7fa4c7
1 changed files with 18 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -3,19 +3,15 @@ title: CSS3 Media Queries
---
## CSS3 Media Queries
Media Queries allow you to have different styles for different devices/screen sizes. Their introduction in CSS3 has greatly eased the building
of responsive webpages.
Media queries allow you to design a website differently for different devices/screen sizes. Their introduction in CSS3 has greatly eased the building of responsive webpages.
The best approach when designing a responsive website is to think mobile first; meaning that you create your page starting with the design and content
of the mobile version. You may think that with some scalable sizes ( %, vw or vh ), your page will adapt perfectly to any device. But it will not. Maybe
for some very basic design, but certainly not for more common or complex pages!
The best approach when designing a responsive website is to think <em>mobile first</em> - meaning that you design the mobile version of your site first and scale up for larger devices. Using relative units of size (like %, vw or vh) will not guarantee your page adapts perfectly to any device, especially for complex layouts! Media queries let you specify <em>breakpoints</em> where different styles will be applied.
When designing your page for smaller devices, you will focus on the main content. On a bigger screen, you will have to adapt some font-sizes, margins,
paddings and so on in order to keep your site comfortable and readable. You will also likely want to add more content and fill in the space created by the screen size.
When designing your page for smaller devices, you should focus on the main content. On a bigger screen, you will want to adjust font sizes, margins, padding, etc. to keep your site readable, but you may also want to add secondary content to fill in the space created by the screen size.
The thought process should be:
The thought process for responsive design should be:
1. Which content to show?
2. How to layout the page?
2. How to create the layout of the page?
3. Which size to use?
### The basic syntax
@ -26,7 +22,7 @@ The thought process should be:
}
```
The `p` tag will have a padding of 30px as soon as the screen reaches min 768px width.</p>
`p` tags will have 30px of padding when the screen width is at least 768px.
### The AND syntax
@ -37,7 +33,7 @@ The `p` tag will have a padding of 30px as soon as the screen reaches min 768px
}
```
The `p` tag will have a padding of 30px as soon as the screen reaches min 768px height and its orientation is landscape.
`p` tags will have 30px of padding when the screen height is at least 768px AND its orientation is landscape.
### The OR syntax
@ -47,21 +43,23 @@ The `p` tag will have a padding of 30px as soon as the screen reaches min 768px
}
```
The `p` tag will have a padding of 30px as soon as the screen reaches min 768px width or its resolution reaches min 150dpi.
`p` tags will have 30px of padding when the screen width is at least 768px OR its resolution reaches 150dpi.
### And beyond!
There are more operators beyond the main two, a full list with examples can be found [https://css-tricks.com/logic-in-media-queries/](in this article from CSS Tricks.)
Additional tips for using media queries, such as the `not` operator and examples of greater specificity, can be found [https://css-tricks.com/logic-in-media-queries/](in this article from CSS Tricks.)
Beyond the core uses of media queries for mobile-first web design shown above, media queries can do a lot, especially for web accessibility. Here are just a few examples:
Beyond their core use for mobile-first web design, media queries can also greatly improve web accessibility. Here are a few examples:
1. Adjusting for screen readers that convert website text to speech for the visually impaired (for example, ignoring non-essential text).
1. Adjusting for screen readers that convert website text to speech for people with visual impairments (for example, ignoring non-essential text).
```css
@media speech {
/* ... */
}
```
2. Allowing for more graceful zooming in for those with minor visual impairments, such as many elderly people.
2. Allowing for more graceful zooming in for people with visual impairments.
3. Allowing smoother experiences for those who prefer or need less animation to read a page.
```css
@media (prefers-reduced-motion: reduce) {
@ -71,7 +69,7 @@ Beyond the core uses of media queries for mobile-first web design shown above, m
}
}
```
4. Restyling a page for when it's printed as opposed to read on a screen.
4. Restyling a page for printing as opposed to reading on a screen.
```css
@media print {
/* ... */
@ -81,7 +79,7 @@ Beyond the core uses of media queries for mobile-first web design shown above, m
### More Information
* [MDN - media queries](https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries)
* [W3 Schools - @media rule](https://www.w3schools.com/cssref/css3_pr_mediaquery.asp)
* [CSS Tricks Standard Device Widths Article](https://css-tricks.com/snippets/css/media-queries-for-standard-devices/)
* [Ethan Marcotte A List Apart Atricle on Responsive Web Design](https://alistapart.com/article/responsive-web-design)
* [Brad Frost 7 habits of highly effective media queries](http://bradfrost.com/blog/post/7-habits-of-highly-effective-media-queries/)
* [CSS Tricks - Standard Device Widths Article](https://css-tricks.com/snippets/css/media-queries-for-standard-devices/)
* [Ethan Marcotte - A List Apart Article on Responsive Web Design](https://alistapart.com/article/responsive-web-design)
* [Brad Frost - 7 habits of highly effective media queries](http://bradfrost.com/blog/post/7-habits-of-highly-effective-media-queries/)
* [How to make media queries work on older browsers](https://www.templatemonster.com/blog/css-media-queries-for-all-devices-and-browsers-including-ie7-and-ie8/)