מגבלה מרכזית של עיצוב מבוסס פיקסלים או אחוזים היא חוסר היכולת לשנות את כל הגדלים בהתאמה באמצעות Media Query. זה בדיוק מה שיחידות המידה rem נועדו לפתור. טיפ CSS קצר שיעזור לכם לכתוב עמודים ריספונסיביים קלים יותר לתחזוקה.

1. נתחיל עם פיקסלים

נתון העיצוב הבא מבוסס פיקסלים:

נרצה להתאים אותו כך שבמסכים גדולים מ-600 פיקסלים כל הטקסט יהיה גדול פי 1.5, והטקסט המרכזי ממורכז. לצורך ההתאמה עלינו לכתוב את כל הגדלים ב CSS מחדש, כך שקוד ה CSS המותאם יראה כך:

html { font-size: 10px; }

.separator {
	width:100%;
	height:100px;
	background:blue;
}

h1 {
	font-size: 30px;
}

p {
	font-size: 20px;
	border: 20px solid blue;
}

@media screen and (min-width:800px) {
	h1 {
		font-size: 45px;
		text-align:center;		
	}
	p {
		font-size: 45px;
		text-align:center;
	}
}

קוד ה CSS שהתווסף הוא ארוך ולא מספר את הסיפור האמיתי: שבוצעה הגדלה פי 1.5 של הטקסטים. אם בעתיד נשנה את אחד הגדלים בעיצוב המקורי, נצטרך ללכת ל Media Query ולשנות את הגודל גם שם כדי שהיחס יישמר. 

2. נשפר באמצעות rem

יחידת המידה rem הינה יחידת מידה יחסית לגודל הגופן של אלמנט html. כך בקטע ה CSS הבא מימדי התיבה יהיו 20 פיקסלים:

html { 
    font-size: 10px; 
}

.box { 
    width: 2rem; 
    height: 2rem;
}

זה נחמד כי אפשר ב Media Query פשוט לשנות את גודל הגופן של אלמנט html, וכך כל הגדלים בעמוד משתנים בהתאמה. כך למשל ייראה העיצוב הקודם כאשר נשתמש ב rem במקום בפיקסלים:

3. סיכום והערות

יחידת המידה rem משמשת אותנו לעיצובים ריספונסיביים כדי שנוכל להגדיל או להקטין את כל הגדלים במסך בהתאמה עבור Media Queries שונים. היחידה נתמכת בכל הדפדפנים פרט ל IE8 ומטה, כך שרוב הסיכויים שאתם יכולים להשתמש בה בעיצוב שלכם.

יחידת המידה rem היא שיפור של יחידת מידה ישנה יותר שנקראת em. היחידה em עושה עבודה דומה אך הגודל שלה יחסי לגודל הגופן של המיכל, מה שאומר שקשה להשתמש בה בעיצובים מורכבים.