RWD Media Queries

Full Stack MERN Web Development

It is crucial for RWD to adapt to device characteristics
Media Queries inspect output device type and characteristics
then conditionally apply styles based on this information
Most commonly used for viewport, but can also be used for orientation, resolution, etc.

defines CSS rules for screens with a max-width of 600px

@media (max-width: 600px) {
/* css rules */
}
@media screen and (max-width: 600px) {
/* css rules */
}
- @media: defines a "Media Query" rule to begin conditional styling
- screen: Media type (this rule applies to screens)
  - Use the screen and designation to make a more specific query to target output types of "screen"
  - Omit the screen and designation, to include a broad range of output types, such as print or screen.
  - *see info on @media screen specificity here
- and: Logical operator to combine conditions
- (max-width: 600px): sets the conditions for the max width
- { css rules }: set the css rules to apply to this style

Important Rules

These are the universal media queries