Responsive Design

Since more devices and screen sizes are available, we need a way to create a layout that can
respond to the device being used to view the content.
RWD are best practices for doing so..for making websites usable on all kind of devices. There
are four main techniques:

* Fluid Layouts: allow a webpage to adapt to the current viewport width of height.

Use % (or vh, or vw) units instead of px for elements that should adapt to viewport

Use max-width instead of width.

* Responsive Units: make it easy to automatically scale the entire layout up or down.

Use rem unit instead of px for most lenghts

Flexible Images: by default images don't scale automatically as we change the viewport.

Use % for image dimensions, together with the max-width property.

If the width property is set to a percentage and the height property is set to "auto", the
image will be responsive and scale up and down:

If the max-width property is set to 100%, the image will scale down if it has to, but never
scale up to be larger than its original size:

Background images can also respond to resizing and scaling.

If the background-size property is set to "contain", the background image will scale, and
try to fit the content area. However, the image will keep its aspect ratio (the proportional
relationship between the image's width and height):

If the background-size property is set to "cover", the background image will scale to
cover the entire content area. Notice that the "cover" value keeps the aspect ratio, and some
part of the background image may be clipped:

* Media Queries: allow to change CSS styles on certain viewport widths (called breakpoints).

Allow to create different versions of a website for different types of devices.

Setting The Viewport

Addtag to set the viewport which so the browser know how to scale.
 <meta name="viewport" content="width=500, initial-scale=1">

Media Queries
Media queries let us adapt a web page depending on certain parameters.

In CSS, use the @media at-rule to conditionally apply part of a style sheet based on the result
of a media query. Ex media (therefore not a printed document) and the viewport is at least 1024
pixels wide.

@media screen and (min-width: 1024) {

.container {
margin: 1em 2em;
}

Usually we create a single-column layout for mobile phones, then implement a multiple-column
layout for tablet or desktop devices.

The points at which a media query is introduced, and the layout changed, are known as
breakpoints.

phone only (600) / tablet portrait (900) / tablet landscape (1200) / desktop (1800) / big desktop
(+)

Responsive Images
Images that scale nicely to fit any browser size.

If the CSS width property is set to 100%, the image will be responsive and scale up and down:
If the max-width property is set to 100%, the image will scale down if it has to, but never scale
up to be larger than its original size:

Responsive websites are built using media queries to target breakpoints that scale
images, wrap text and adjust layout so that the website can ‘shrink to fit’ any size of
screen.
Fluid design are websites that use percentages for widths.
Fixed design are websites that rely on fixed pixel widths. This is the quickest way to get
up and running, it’ll provide a less user-friendly across multiple devices.

it is a term used to describe an approach to web design or a set of best practices, used to
create a layout that can respond to the device being used to view the content.
Angular Flex-Layout
It has a powerful responsive API that enables developers to easily specify different layouts,
sizing, visibilities for different viewport sizes and display devices.

Mobile First
applications should be redesigned from a scratch for smaller screens and then write media
queryes to expand to larger screens (using mix-width)

instead of start writing CSS for desktop and then using mediaqueryes to shrink design to
mobile devices (using max-width)