Responsive Web Design... I'm Back

It's been a while since I posted on here. But I'm still on the journey of web development, fear not. I've gone through essential CSS concepts and some next-level Javascript. But that's not what we're here to talk about.

Today I was going through the Responsive Design module on Scrimba and it was really eye-opening. They started off by going through the different units of measurements that comprise effective responsive web design. The units discussed were em, rem and percentages. There are other relative units of measurements but these were the main ones discussed.

Em is a relative unit of measurement. When used on font size it is based on its parent element. The reason that em shouldn't be used on font-size is that when their parent elements have units of em it would stack. This would cause the font size to multiply and two different h1's or paragraph elements would have different font size because they're inheriting the font-size from parents. Em is better used for properites such as margin and padding, when used for those properties it isn't relative to the parent element, but the current element it is on. ex. if the padding on a p element is 1em and the p element has a font size of 16px then the padding will be 16px and you can adjust accordingly.

Rem is another relative unit of measurement in CSS. Rem is better suited for font size. This is because it doesn't inherit the various font sizes from parent elements and it distributes font size according to the root element of the document which is the HTML document. So if the HTML document has a font size of 16px and you set a h1 to 2em the h1 would have a font size of 32px.

It is better to use these relative units because if you need to change the font of the website then everything will change to scale. You won't have to go and change each individual element again like you would have if you used pixel.

The next thing we covered was media queries. I found this to be super useful. This is the magic that happens behind the scenes to make a website go from looking one way on a laptop or a desktop to looking another way on a tablet or cell phone. The syntax is as follows:

@media (max-width: 500px) { .container{ flex-direction: column; } }

This is useful for changing the way the content flows on the website when the screen of the website is under a certain size.

That's all for today, I'm really happy with my progress and I'm glad I was able to give you guys an update.

Till next time, Sanjay signing out.