Modern HTML and CSS from the Beginning (Including Sass) - Em & Rem Units

The video tutorial explains the differences between M and REM units in CSS, highlighting how M units are relative to the font size of their parent element, while REM units are relative to the root HTML element. The tutorial demonstrates practical examples of both units, discusses the challenges of using M units, especially in nested elements, and emphasizes the benefits of REM units for accessibility and browser adaptability. The instructor recommends using REM units for consistency and accessibility, while also providing insights into adjusting root font sizes for better responsiveness.

What is the primary difference between M and R.E.M units?

• Both M and R.E.M units are relative to the parent element.

• Both M and R.E.M units are relative to the root element.

• M units are relative to the root element, while R.E.M units are relative to the parent element.

• M units are relative to the parent element, while R.E.M units are relative to the root element.

What is the default font size of the root HTML element?

• 10 pixels

• 12 pixels

• 14 pixels

• 16 pixels

If the font size of a parent element is 20 pixels, what would be the computed font size of a child element set to 1.5M?

• 25 pixels

• 15 pixels

• 30 pixels

• 20 pixels

Why might M units be confusing when used with padding?

• Padding is not affected by M units.

• Padding is calculated based on the viewport size.

• Padding is always calculated based on the root element.

• Padding is calculated based on the element's own font size, not the parent.

What is a key advantage of using R.E.M units over M units?

• R.E.M units are easier to calculate than pixels.

• R.E.M units are always based on the root element, making them more consistent.

• R.E.M units are always based on the parent element.

• R.E.M units are not affected by browser settings.

How does changing the root element's font size affect R.E.M units?

• It does not affect R.E.M units.

• It changes the size of elements using R.E.M units proportionally.

• It only affects the padding of elements.

• It only affects elements using M units.

What is a common practice to make R.E.M units easier to calculate?

• Setting the root font size to 16 pixels.

• Avoiding the use of any relative units.

• Setting the root font size to 10 pixels or 62.5%.

• Using M units instead of R.E.M units.

What happens to R.E.M units when browser font size settings are changed?

• R.E.M units are converted to pixels.

• R.E.M units remain unchanged.

• R.E.M units adjust according to the new browser settings.

• R.E.M units become inconsistent.

Why are R.E.M units considered more accessible than M units?

• They are not affected by browser settings.

• They allow for consistent scaling across different devices.

• They are easier to calculate than M units.

• They respond to user preferences in browser settings.

How do R.E.M units enhance the responsiveness of a web design?

• By being based on the parent element.

• By being unaffected by changes in the root element.

• By adapting to changes in the root element's font size.

• By being fixed in size.