docs(blog): update em vs rem article for clarity and snippets (refine…

…dev#6535)
anewman15 · Nov 28, 2024 · 42cc71e · 42cc71e
1 parent 93fbc2e
commit 42cc71e
Showing 1 changed file with 10 additions and 1 deletion.
diff --git a/documentation/blog/2024-07-19-em-vs-rem.md → documentation/blog/2024-11-28-em-vs-rem.md b/documentation/blog/2024-07-19-em-vs-rem.md → documentation/blog/2024-11-28-em-vs-rem.md
@@ -8,14 +8,23 @@ image: https://refine.ams3.cdn.digitaloceanspaces.com/blog/2022-12-21-em-vs-rem/
 hide_table_of_contents: false
 ---
 
-**This article was last updated on July 19, 2024, to add sections for Accessibility Considerations, Advanced Usage of em and rem, and Performance Implications.**
+**This article was last updated on November 28, 2024, to add sections for clear introduction to rem vs em.**
 
 ## Introduction
 
 CSS is a crucial part of any website’s design, but understanding the nuances of how to use it can be tricky. One of the most important things to understand is the difference between using rem and em in CSS and why/when you should be using either.
 
 Understanding the differences between these two units is crucial for web developers who want to create flexible and responsive web pages that are easy to maintain and modify. It also helps your website meet current web accessibility guidelines.
 
+### What is em and rem in CSS?
+
+In CSS, `em` and `rem` represent relative units that display the scalable and responsive results.
+
+- **`em`:** It is relative to the font size of the parent. For example, if a parent font size is 20px, then `2em` will equal 40px.
+- **`:rem`:** It's relative to root element font size, usually `<html>`. For example, if root font size is 16px, then `1rem` equals 16px.
+
+Both units scale well and are suitable for accessibility and responsive design: use `rem` when you want to look for consistency across a project, and `em` to act on modules.
+
 In this article, we'll look at everything em and rem, their differences, when and how to use them, and practical examples of em and rem in action. At the end of this article, you should have a solid understanding of both values. Without further ado, let’s jump right into it.
 
 Steps we'll cover in this article: