Day 19. Responsive Design

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.

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

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

• 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.

<picture>
  <source media="(min-width: 800px)" srcset="head.jpg, head-2x.jpg 2x" />
  <source
    media="(min-width: 450px)"
    srcset="head-small.jpg, head-small-2x.jpg 2x"
  />
  <img
    src="head-fb.jpg"
    srcset="head-fb-2x.jpg 2x"
    alt="a head carved out of wood"
  />
</picture>

• 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