The World Wide Web:
Responsive Layout


 Slides

Responsive Layout

"Responsive" means that the layout changes (responds) based on the width of the screen

Why is this important?

Responsive Layout: Media Queries

  • Media Queries (@media) cause different CSS rules to be applied on different screens

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

  • Chrome/Mozilla Tools allow you to simulate different screen sizes on the fly

Responsive Layout: 12-grid systems

  • Bootstrap defines a 12-column grid
  • TODO: diagrams and examples
  • Implemented via FlexBox, with CSS2 fallbacks for old browsers/devices

Responsive Layout: CSS Grid

  • CSS Grid is more powerful than Bootstrap
  • TODO: diagrams and examples




Comments

comments powered by Disqus