Frontend Development: JavaScript

🚀 ReDI Fall 2020 🚀

Lecture 14

Responsive Design

What we will do today

Your Questions
Viewports
Media Queries
Flex boxes
Grids

Your Questions

Viewports

Viewport = viewing region of the website
A cause for confusion: 1px is not necessarily as big as a pixel
High-Resolution Displays have multiple pixels per px
Specify the viewport width to make use of this feature:


<meta name="viewport" content="width=device-width">

Media Queries

Adds conditions about the user's viewports for CSS rules
Most common use case: Different styles for different viewport widths
Another popular use case: Print layout


@media screen and (min-width: 600px) {
  /* CSS-Rules here only apply if the viewport
     is at least 600px wide */
}
@media print {
  /* CSS-Rules here only apply when printing the website */
}

Flex boxes

A concise way of creating flexible elements, that react to the viewport and to each other
Useful for specifying the arrangement of items on different viewport sizes with CSS only
There are too many different rules to list, so here is an overview

Grids

A css-only way of creating tabular grids
Main advantage over tables: The structure isn't defined in HTML. That way, I can change the table using media-queries
Use flex boxes and grids in conjunction to create the layout you need
Again, there are too many different properties to list, so here is an overview