{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

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

{the jump} Full-Stack Bootcamp: Session 8

By James Sherry

{the jump} Full-Stack Bootcamp: Session 8

Intro to media queries

  • 1,682

More from James Sherry