Basic website layout and styling

Responsive design

• Set the visual viewport

<meta name="viewport" content="width=device-width, initial-scale=1.0" >

Responsive Web Design Basics

Using the viewport meta tag to control layout on mobile browsers - MDN

• Use media queries

// 48rem(768 pixels at browser's default font size or 48 times the
// default font size in the user's browser)
@media screen and (max-width: 48rem)

When to Use Em vs. Rem

• Using Flexbox

A Complete Guide to Flexbox

Material Design

Responsive images

• Set the relative width

make sure images won't overflow the screen

img {
  max-width: 100%;
}

• Using the srcset attribute

The goal is to get the browser to fetch the version of the image with the
smallest dimensions that is still bigger than the final display size of the image.

srcset lets us list a set of images at different resolutions for the browser
to choose from when fetching the image. The browser's choice depends on the
viewport dimensions, the image size relative to the viewport, the pixel density
of the user's device, and the source file's dimensions.

// On a 1x display, the browser fetches sfo-500_small.jpg when the
// window is narrower than 500px, sfo-800_medium.jpg when it is
// narrower than 800px, and so forth.
<img
  id="sfo"
  src="images/sfo-500_small.jpg"
  alt="View from aircraft window near San Francisco airport"
  srcset="
    images/sfo-1600_large.jpg 1600w,
    images/sfo-1000_large.jpg 1000w,
    images/sfo-800_medium.jpg  800w,
    images/sfo-500_small.jpg   500w
  "
/>

srcset and sizes

• Using media queries

// The `sizes` value matches the image's max-width value in the CSS.
<img
  id="sfo"
  src="images/sfo-500_small.jpg"
  alt="View from aircraft window near San Francisco airport"
  srcset="
    images/sfo-1600_large.jpg 1600w,
    images/sfo-1000_large.jpg 1000w,
    images/sfo-800_medium.jpg  800w,
    images/sfo-500_small.jpg   500w
  "
  sizes="(max-width: 800px) 50vw, 100vw"
/>

sizes="(min-width: 800px) 50vw, 100vw"

Meaning: “If the browser window is wider than 800px, this image is probably
going to be displayed about half the size of that. If it’s smaller, it’ll
probably be full-width.”

@media

• Use the picture and source elements

<picture>
  <source
    srcset="
      images/horses-1600_large_2x.jpg 2x,
      images/horses-800_large_1x.jpg
    "
    media="(min-width: 750px)"
  />
  <source
    srcset="images/horses_medium.jpg"
    media="(min-width: 500px)"
  />
  <img src="images/horses_small.jpg" alt="Horses in Hawaii" />
</picture>

picture MDN
source MDN

Responsive Images: If you're just changing resolutions, use srcset

media

<video controls width="400" height="400"
       autoplay loop muted
       poster="poster.png">
  <source src="rabbit320.mp4" type="video/mp4">
  <source src="rabbit320.webm" type="video/webm">
  <track kind="subtitles" src="subtitles_en.vtt" srclang="en"> //
  <p>Your browser doesn't support HTML video. Here is a <a href="rabbit320.mp4">link to the video</a> instead.</p>
</video>

<audio controls>
  <source src="viper.mp3" type="audio/mp3">
  <source src="viper.ogg" type="audio/ogg">
  <p>Your browser doesn't support HTML5 audio. Here is a <a href="viper.mp3">link to the audio</a> instead.</p>
</audio>

// Restarting media playback
const mediaElem = document.getElementById("my-media-element");
mediaElem.load();

Video and audio content