coryhouse / coryhouse/reactjsconsulting
Media Queries
- Dominant language
- JavaScript
- Stars
- 374
- Forks
- 33
- PR merge metrics
- No merged PRs in 30d
Description
Why Media queries? Include some CSS when some condition is true.
Example:
```css
@media only screen and (max-width: 600px) {
body {
background-color: lightblue;
}
}
```
Make background blue when in landscape mode (width > height)
```css
@media only screen and (orientation: landscape) {
body {
background-color: lightblue;
}
}
```
Show content on > 600px screen (this assumes hidden by default in separate CSS):
```css
@media only screen and (min-width: 600px) {
div.example {
display: block;
}
}
```
## Media Types
- all - default
- screen - Computer screens, tablets, smart-phones
- print - applies when printing [hit print here for Example](https://css-tricks.com/snippets/css/a-guide-to-flexbox/).
- speech - For screen readers
```html
```
```css
@media screen {
body {
color: white;
background-color: black;
}
}
@media print {
body {
color: white;
background-color: black;
}
}
```
Can even apply a stylesheet for specific screens:
```html
```
For multiple options, a comma operates as an OR.
Example: When the width is between 600px and 900px OR above 1100px - change the appearance of
```css
@media screen and (max-width: 900px) and (min-width: 600px), (min-width: 1100px) {
div.example {
font-size: 50px;
padding: 50px;
border: 8px solid black;
background: yellow;
}
}
```
## Media Features
Useful for applying media query in specific circumstances such as viewport `width`/`height`, `orientation`, and prefers-* rules that convey the user's preferences. [Full list on MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries#Media_features).
The prefers-* settings use OS level settings. Examples: [color-scheme](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme#See_also) and [reduced-motion](https://developer.paciellogroup.com/blog/2019/05/short-note-on-prefers-reduced-motion-and-puzzled-windows-users/).
```css
@media (prefers-color-scheme: dark) {
body {
background-color: black;
color: white;
}
}
```
## Run JS based on media queries
Can use [window.matchMedia()](https://www.w3schools.com/jsref/met_win_matchmedia.asp) to run JS that matches a media query. Also consider [MediaQueryList](https://developer.mozilla.org/en-US/docs/Web/API/MediaQueryList), though not as broadly supported.
- Normalizing cutoff points
- Built into Bootstrap
- Setting meta tags for viewports
## React
[react-responsive](https://github.com/contra/react-responsive#easy-mode) - Hook for declarative breakpoints.
Contributor guide
No contributing guide indexed for this repository
Research direction
No target file or test is named. Start by locating the repository's documentation or resource index and compare its conventions with the media-query examples and links in this issue. The work is done when the agreed content has a clear home and the examples and references are verified.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- css, javascript, react
- Domain
- documentation, frontend
- Issue type
- Documentation
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100