Mikke.Learns

Coding log 05.03.19

May 2nd, 2019

Today I started on a new challenge on freeCodeCamp: Responsive Design Principles.

The first lesson was about creating a media query.

A media query is a technique introduced in CSS3. It lets us change the design of our content based on the user’s viewport size.

What is a viewport? It’s the visible area of a webpage. The size of the viewport depends on the user’s device, browser window, screen, and other factors.

Media queries consist of a media type. And inside the media queries we can have as many selectors and styles as we want.

When the media type matches the device the document is displayed on, the relevant styles are applied:

@media (max-width: 200px) { /* CSS Rules */ }

In this example the media type is “max-width: 200px”. When the condition is met, the styles are applied. In this case, that means when the device’s width is less than or equal to 200px.

Here is another example with max-height:

@media (max-height: 800px) { p {font-size: 10px;} }

Responsive images

Making images responsive with CSS is pretty straight forward. Ins tead of using an absolute width, we use percent:

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

This will scale the image to the width of its container, but it will not stretch wider than it’s original size. So if an image is 700px, that is the same as 100% in this case.

The height property keeps the aspect ratio correct. The block property changes the image from an inline element to a block element.

Retina images

To give our images the high quality “retina” look, we have to define their width and height values as half of the original size.

<style> img { height: 100px; width: 100px; } </style> <img src="Pic200x200" alt="A great picture">

Responsive typography

We can use viewport units (vw) to scale fonts as an alternative to em and px. Like percent, vw units are relative units, but they are based on the viewport width and height and not on the parent element like percent.

I have earlier type: entry-hyperlink id: a3TpIOuBzR6BdhJDWQMkD.

And that concluded the Responsive Design Principle.