https://github.com/diraneyya/responsivecss-class
https://github.com/diraneyya/responsivecss-class
Last synced: 25 days ago
JSON representation
- Host: GitHub
- URL: https://github.com/diraneyya/responsivecss-class
- Owner: diraneyya
- License: mit
- Created: 2023-01-24T12:34:46.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2023-01-24T12:58:57.000Z (over 3 years ago)
- Last Synced: 2023-03-10T17:55:44.720Z (about 3 years ago)
- Language: CSS
- Homepage: https://diraneyya.github.io/responsivecss-class/
- Size: 3.91 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Responsive CSS Class
In this class we explored:
- The `@media` so-called **at-rule** in modern CSS
- The different, so-called **media types** (e.g. _screen_, _page_, etc.)
- The different, so-called **media features** (e.g. _min-width_, _max-width_, _prefers-color-scheme_, _pointer_, etc.)
The syntax for a media query:
```Mustache
[[{{not|only}}] {{mediatype}}] [{{and|or}}] [({{mediafeature}}: {{mediafeaturevalue}}) ]...
```
From the syntax above, we can say that a media query:
- Can optionally start with either `only` or `not`, followed by a **media type** (e.g. _screen_, _page_, etc.)
- If we start with the above, then we need the keyword `and` to combine the media type with one or more **media feature rules**
- A media feature rule is enclosed in parantheses `(...)` and in between we have one of the possible **media features** followed by a colon and the desired **media feature value**.
- In case of more than one **media feature rules** they have to be combined with either `and` or `or` to decide the logical relationship between these rules (e.g. do you want them all to apply, or only some of them)
Media queries can be nested, such as most other at-rules in CSS. Example:
```CSS
@media only screen {
@media (prefers-color-scheme: dark) {
/* CSS declarations here apply only to dark mode on the screen */
}
}
```