Responsive Web Design

Relative Measurements

Modern technology allows users to browse the Internet via multiple devices, such as desktop monitors, mobile phones, tablets, and more. Devices of different screen sizes, however, pose a problem for web developers: how can we ensure that a website is readable and visually appealing across all devices, regardless of screen size?
The answer: responsive design! Responsive design refers to the ability of a website to resize and reorganize its content based on:

1. The size of other content on the website.
2. The size of the screen the website is being viewed on.

In this lesson, we'll size HTML content relative to other content on a website.
You've probably noticed the unit of pixels, or px, used in websites. Pixels are used to size content to exact dimensions. For example, if you want a div to be exactly 500 pixels wide and 100 pixels tall, then the unit of px can be used. Pixels, however, are fixed, hard coded values. When a screen size changes (like switching from landscape to portrait view on a phone), elements sized with pixels can appear too small, overflow the screen, or become completely illegible.
With CSS, you can avoid hard coded measurements and use relative measurements instead. Relative measurements offer an advantage over hard coded measurements, as they allow for the proportions of a website to remain intact regardless of screen size or layout.

What is Responsive Web Design?
Responsive Web Design makes your web page look good on all devices (desktops, tablets, and phones).
Responsive Web Design is about using HTML and CSS to resize, hide, shrink, enlarge, or move the content to make it look good on any screen:

Responsive Images

Responsive images are images that scale nicely to fit any browser size.

<img src="img.jpg" style="width:100%;">

Show Different Images Depending on Browser Width

The HTML <picture> element allows you to define different images for different browser window sizes.
Resize the browser window to see how the image below change depending on the width:

<picture>
<source srcset="imgflower.jpg" media="(max-width: 500px)">
<source srcset="imgflower.jpg" media="(max-width: 1000px)">
<source srcset="flowers.jpg">
<img src="imgflower.jpg" alt="Flowers">
</picture>

Percentages: Height & Width

.main {
height: 300px;

 width: 500px;

 } 

 .main .subsection { height: 50%; 

 width: 50%;

 } 

In the example above, .main and .subsection each represent divs. The .subsection div is nested within the .main div. Note that the dimensions of the parent div (.main) have been set to a height of 300 pixels and a width of 500 pixels.

When percentages are used, elements are sized relative to the dimensions of their parent element (also known as a container). Therefore, the dimensions of the .subsection div will be 150 pixels tall and 250 pixels wide. Be careful, a child element's dimensions may be set erroneously if the dimensions of its parent element aren't set first.


em

Incorporating relative sizing starts by using units other than pixels. One unit of measurement you can use in CSS to create relatively-sized content is the em, written as em in CSS.

Historically, the em represented the width of a capital letter M in the typeface and size being used. That is no longer the case.
Today, the em represents the size of the base font being used. For example, if the base font of a browser is 16 pixels (which is normally the default size of text in a browser), then 1 em is equal to 16 pixels. 2 ems would equal 32 pixels, and so on.

Let's take a look at two examples that show how em can be used in CSS.
.heading {

 font-size: 2em;

 } 

 
In the example above, no base font has been specified, therefore the font size of the heading element will be set relative to the default font size of the browser. Assuming the default font size is 16 pixels, then the font size of the headingelement will be 32 pixels.

.splash-section {

 font-size: 18px;

 } 

 .splash-section h1 {

 font-size: 1.5em;

 }

rem

The second relative unit of measurement in CSS is the rem, coded as rem.
Rem stands for root em. It acts similar to em, but instead of checking parent elements to size font, it checks the root element. The root element is the <html> tag.
Most browsers set the font size of <html> to 16 pixels, so by default rem measurements will be compared to that value. To set a different font size for the root element, you can add a CSS rule.

html {
font-size: 20px;

 }
h1 {

 font-size: 2rem;

 }

In the example above, the font size of the root element, <html>, is set to 20 pixels. All subsequent rem measurements will now be compared to that value and the size of h1 elements in the example will be 40 pixels.

One advantage of using rems is that all elements are compared to the same font size value, making it easy to predict how large or small font will appear.

If you are interested in sizing elements consistently across an entire website, the rem measurement is the best unit for the job. If you're interested in sizing elements in comparison to other elements nearby, then the em unit would be better suited for the job.

Width: Minimum & Maximum 

Although relative measurements provide consistent layouts across devices of different screen sizes, elements on a website can lose their integrity when they become too small or large. You can limit how wide an element becomes with the following properties:

min-width — ensures a minimum width for an element.
max-width — ensures a maximum width for an element.

p { 

min-width: 300px; 

max-width: 600px;

}

Scaling Images and Video

Many websites contain a variety of different media, like images and videos. When a website contains such media, it's important to make sure that it is scaled proportionally so that users can correctly view it.
.container { width: 50%; height: 200px; overflow: hidden; } .container img { max-width: 100%; height: auto; display: block; }