Responsive Design

Created: 2022-11-28

Web design approach to make web pages
-> render well on all screen sizes and resolutions while ensuring good usability
-> enabling automatic adaption to the screen, whether the content is viewed on a tablet, phone, television, or watch.

HTML is fundamentally responsive, or fluid.
A web page only HTML, no CSS, and when u resize the window, browser automatically reflow the text to fit the viewport.

At the time,
the recommendation was to use CSS float for layout and media queries to query the browser width, creating layouts for different breakpoints.
Fluid images are set to not exceed the width of their container; they have their max-width property set to 100%.
Fluid images scale down when their containing column narrow but do not grow larger than their intrinsic size when the column grows.
This enables an image to scale down to fit its content, rather than overflow it, but not grow larger and become pixelated if the container becomes wider than the image.

Media Quaries

Media queries can help with RWD, but are not a requirement

Media queries allow us to run a series of tests
(e.g. whether the user's screen is greater than a certain width, or a certain resolution)
and apply CSS selectively to style the page appropriately for the user's needs.

For example,
The following media query tests to

see if the current web page is being displayed as screen media (therefore not a printed document)
and the viewport is at least 80rem wide.
The .container selector will only be applied if these two things are true.

@media screen and (min-width: 80rem) {
  .container {
    margin: 1em 2em;
  }
}

You can add multiple media queries within a stylesheet, tweaking your whole layout or parts of it to best suit the various screen sizes.
Breakpoints
The points at which a media query is introduced, and the layout changed

A common approach when using Media Queries is to create a simple single-column layout for narrow-screen devices (e.g. mobile phones), then check for wider screens and implement a multiple-column layout when you know that you have enough screen width to handle it. Designing for mobile first is known as mobile first design.

If using breakpoints, best practices encourage defining media query breakpoints with relative units rather than absolute sizes of an individual device.

Responsive Layout Technologies

Several layout methods are responsive by default

Multi-Column Layout,
Flexbox,
Grid Layout
They all assume that you are trying to create a flexible grid and give you easier ways to do so.

Responsive Images

To ensure media is never larger than its responsive container, the following approach can be used:

img,
picture,
video {
  max-width: 100%;
}

Responsive Typography

Viewport Meta Tag

<meta name="viewport" content="width=device-width,initial-scale=1" />
Tells mobile browsers that

they should set the width of the viewport to the device width,
and scale the document to 100% of its intended size,
which shows the document at the mobile-optimized size that you intended.

Why is this needed?

Because mobile browsers tend to lie about their viewport width.

By setting width=device-width you are overriding a mobile device's default,
like Apple's default width=980px, with the actual width of the device.
Without it, your responsive design with breakpoints and media queries may not work as intended on mobile browsers.
If you've got a narrow screen layout that kicks in at 480px viewport width or less,
but the device is saying it is 980px wide, that user will not see your narrow screen layout.

So you should always include the viewport meta tag in the head of your documents.