Learning to Code: Day 24 — Responsive Web Design

Hello everyone, well today I’m experiencing the same issues like everyday when it comes to coding on my Mac, my MacBook Pro is from 2012 and runs slower than a dead snail. But after an hour and a half I’ve managed to get all the programs to respond again, so here we go!

Today is a single chapter on Responsive Web Design and covers the main areas. Thanks to FreeCodeCamp for the lessons.

Element: Hey you wanna get this beer?

Declaration: Sure, put it on my tab!

—

Creating a Media Query

Media Queries change the presentation of content based on the viewport (the screen) size of different devices. A media type is written followed by the constraints of the given device, which if true, will then apply the properties given inside that query. Here’s an example within the style tags:

@media (max-height: 800px) {

p {font-size:10px;}

}

So this media query is saying if the screen size of the device is smaller than or equal to 800px in height, then a font-size of the paragraph will change to 10px. Pretty easy to understand, right?

Make an Image Responsive

We can apply the same style of rules to images too with a very simple code. Let’s see it first then break it down:

img {
  max-width: 100%;
  height: auto;
}
-FreeCodeCamp

For the img selector, the max-width is telling the image to never be larger than 100% of the viewport, and the height is making sure the image remains the same original aspect ratio. Only two lines of code within the img selector to make the image responsive. Easy peasy.

Using Retina Image for Higher Resolution Displays

Hey speaking of Macs, modern models today use Retina Display, which has a higher pixel density than other displays. This means that some images may appear “pixelated” when not made originally with a high-resolution display.

So we’re going to write some code that changes that. We’re simply going to write the height and width values of these images as half of what their original file was. Here’s an example of that change, notice where the pixels original height and width is written in the src (as 500x500):

<style>
  img { height: 250px; width: 250px; }
</style>
...
<img src="coolPic500x500" alt="A most excellent picture">
-FreeCodeCamp

The image will then be half it’s original size, but will appear sharper in display.

Making Responsive Typography

Text size is usually defined by em (relative unit of length) or px (absolute unit of length) as we’ve previously covered, but we can also write viewport units to make typography responsive to screen sizes on different devices.

Viewport units are relative to the dimensions (height and width) of the viewport, and use percentages which are relative to the size of the containing parent element. With me so far?

There are four types of viewport units:

vw : viewport width. 10vw means 10% of the viewport’s width.

vh : viewport height. 10vh would be 10% of the viewport’s height.

vmin : viewport minimum. 70vmin would mean 70% of the viewport’s smaller dimension (in height and width).

vmax : viewport maximum. 70vmax would mean 70% of the viewport’s bigger dimension (in height and width).

We can then apply these types to a paragraph for example:

p { width: 50vw; )

Here’s a before and after of the above code:

Before..

..After

This is saying to take the width of the paragraph and set it to 50% of the viewport’s width, which will result in the paragragh only using half of the viewport width. By default it moves to the left and leaves the right-hand-side of the screen blank.

It’s a bit like that margin marker in a word document, that when you drag it, it moves the text over and the text itself readjusts to only use the given space it’s now within.

—

Aaaand that’s the end of a somewhat short chapter on Responsive Web Design!

Next time we’ll be looking at something I’ve heard floating around the community online, Flexboxes. CSS3 introduced Flexbox to make a website’s UI (User Interface) more dynamic.

According to FreeCodeCamp:

“[Flexbox] is a layout mode that arranges elements in a predictable way for different screen sizes and browsers. While somewhat new, all popular modern browsers support flexbox.”

See you tomorrow!