The World Wide Web:
Responsive Layout


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

  • 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 powered by Disqus