12 Weeks

Day 19. Responsive Design

October 29, 2019

Notes from Introduction To Responsive Web Design

CSS Units

  • Absolute Units: Pixels(px), pt, cm, mm, in, etc,
  • Percentage: Mainly used for widths and are pretty easy to understand. Relative to their parent.
  • Relative: Can be relative to font-size(em and rem) or viewport (vw, vh, vmax, vmin)

    • Itā€™s good practice to set all font properties based on the rem unit. A few users can increase or decrease font properties on the browsers. When they do this, everything is based on the :root elementā€™s font size.

Media Queries

  • Media queries follow this format

    @media media-type and (media-features){}

  • The media-type includes screen, speech, print etc.
  • The media-features includes widths, orientation, and other specific-features like hover
  • Both parts of the media queries are optional. But ideally we should use at least one
@media screen {
/*styles apply to screens alone */

or @media (min-width: 900px) {
/* styles apply to all elements above 900px */
  • Thereā€™s also a media query for device orientation.
@media (orientation: portrait) {
/* styles will apply if the length of display is more than it's width. (Portrait mode)*/

Notes from Responsive Web Design Patterns

Thereā€™re a few patterns for responsive web design. Basic ones include

  • Mostly fluid: Content re-arrange themselves to be fluid based on the current viewport


  • Column-drop: Columns are stacked vertically on small screens but makes them horizontal on larger screens.

Column Drop

  • Layout Shifter: Multiple breakpoints and changes in layout as screen size changes.

Layout Shifter

  • Tiny Tweaks: Making small changes such as font size adjustment, resizing images or moving content around as layout changes.

Tiny Tweaks

  • Off Canvas: Content is moved out of the screen canvas (either to the left or right) with certain controls to bring them back on.

Notes from Responsive Images (Google Devs)

  • The picture element enables different image sizes on based on the viewport size.
  <source media="(min-width: 800px)" srcset="head.jpg, head-2x.jpg 2x" />
    media="(min-width: 450px)"
    srcset="head-small.jpg, head-small-2x.jpg 2x"
    srcset="head-fb-2x.jpg 2x"
    alt="a head carved out of wood"
  • The image-set CSS function makes it easy to provide multiple images for different device characteristics.
.selector {
  background-image: image-set(url(icon1x.jpg) 1x, url(icon2x.jpg) 2x);
  • Unfortunately, browser support for image-set isnā€™t perfect.

NB: All images were taken from the Google Developerā€™s Site

  • Iā€™ll be learning about CSS Architecture tomorrow

Quick and Scrappy notes from 12 weeks of learning UX Engineering for the web. More