# Media Query Workshop
---
CSS way to :
- to match pages style with different screen/viewport sizes(responsive designs)
- detect other things about the environment your site is running on
---
### Media Query Syntax
```
@media media-type and (media-feature-rule) {
/* CSS rules go here */
}
```
---
### Examples
let's talk about width and hight
```
@media screen and (width: 600px) {
body {
color: red;
}
}
```
```
@media screen and (max-width: 600px) {
body {
color: blue;
}
}
```
---
```
@media (orientation: landscape) {
body {
color: rebeccapurple;
}
}
```
```
@media (hover: hover) {
body {
color: rebeccapurple;
}
}
```
---
### Use Logic?
```
@media screen and (min-width: 600px), screen and (orientation: landscape) {
body {
color: blue;
}
}
```
```
@media screen and (min-width: 600px) and (orientation: landscape) {
body {
color: blue;
}
}
```
### Questions?
{"metaMigratedAt":"2023-06-15T18:18:55.087Z","metaMigratedFrom":"Content","title":"Media Query Workshop","breaks":true,"contributors":"[{\"id\":\"cd3c9070-2906-4cfb-8d09-6614329d14b5\",\"add\":1268,\"del\":286}]"}