{the jump}

Media Queries & Responsive Design

Session 8

What are they?

mdn guide
Conditional CSS (or elements)
Used in 2 places:
- On elements like:
  - <link> to determine when a stylesheet applies
  - <style> to determine if this block of CSS applies
  - <source> to determine which source to use for <picture>, for example
- Inside stylesheets, to create conditional CSS

Use Case: Print Stylesheets

example

Inside Stylesheets

@media

https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries

Logical Operators:

only (use on link tags) stops old browsers processing the css
and groups queries (so width 300px and landscape)
not excludes types
You can provide a comma separated list, like you do in css stacked selectors to apply the same rules to.

@media

https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries

Logical Operators:

only (use on link tags) stops old browsers processing the css
and groups queries (so width 300px and landscape)
not excludes types
You can provide a comma separated list, like you do in css stacked selectors to apply the same rules to.

Sidenote: @media is a CSS At-rule. You will only need to know a few of them, e.g. @font-face, @keyframes and @supports

@media types

all
aural
braille
handheld
print
projection
screen
tty
tv
embossed

@media Features

Full list
- includes some user-preference stuff, like 'prefers-color-scheme' (dark mode)
- and some accessibility stuff, like 'prefers-reduced-motion' (article) (article from affected dev)
You're going to use things like
- min-width
- max-width

Q: Why are they so important?

A: Responsive Design

.product-list {
  display: flex;
  flex-direction: column;
}

.product {
    padding: 0.8em;
}

@media (min-width: 600px) { /* applies from 600px upwards */
    .product-list { 
      flex-direction: row;
    }
    .product {
        padding: 1em;
        width: 50%;
    }
}

@media (min-width: 1200px) { /* applies from 1200px upwards */
    .product {
        width: 33.33%;
    }
}

Practical Example

IF something matches the query then the CSS rules in the block are used

Mobile First

The layout we mostly want on mobile is known as 'stacked'
- All blocks sit one above the other (block & width 100%)
- This is the default behaviour of block level items anyway, so what we can do is use normal css to define how something looks on mobile
- When we want to change the layout as the screen size increases we can then add media query blocks with rules that allow things to sit next to each other in columns
- min-width is therefore the best choice.
  - Start with mobile styles first, then override with media queries going up in screen sizes, from a min-width...

Sidenote: Responsive Fonts?

demo

Sidenote: Responsive Images?

fluid vs responsive

Responsive Breakpoints

Breakpoints are the widths we agree on as being worthy of a layout change

We can say that:
Phone is < 600px

desktop > 1200px

for example

Bootstrap vs Materialize

Pre-made CSS 'Grids'

Many and various
Consist of:
- containers (to hold to a size)
- rows (to group content)
- columns (to make widths) (often 12)
- gutters (space between)
Example
- docs