რა განსხვავებაა rem და em შორის?
sobes.tech AI
პასუხი AI-სგან
rem და em არის ურთიერთდამოკიდებული ერთეულები CSS-ში, რომლებიც გამოიყენება ზომების განსაზღვრაში, მაგრამ განსხვავდება მითითების საფუძვლით.
-
em — ურთიერთდამოკიდებული ერთეულია, რომელიც დაფუძნებულია მშობელი ელემენტის ფონტის ზომაზე. მაგალითად, თუ მშობლის ფონტის ზომა არის: 16px, მაშინ 1em = 16px. თუ შვილობილი ელემენტში ფონტის ზომა არის: 1.5em, მისი ზომა იქნება 24px.
-
rem — ურთიერთდამოკიდებული ერთეულია, რომელიც დაფუძნებულია ძირითადი ელემენტის (საშუალოდ
<html>) ფონტის ზომაზე. მაგალითად, თუ<html>-ის ფონტის ზომა არის: 16px, მაშინ 1rem ყოველთვის იქნება 16px, მიუხედავად nesting-ის.
ძირითადი განსხვავება:
- em დამოკიდებულია კონტექსტზე (მშობელზე), რაც შეიძლება გამოიწვიოს ზომების ჯაჭვური გამრავლება nesting-ის დროს.
- rem ყოველთვის ფიქსირებულია ძირის მიმართ, რაც გამარტივებს ზომების მართვას და მათ უფრო პროგნოზირებადს ხდის.
მაგალითი:
html {
font-size: 16px;
}
.parent {
font-size: 20px; /* 1em = 20px `.parent`-ის შიგნით */
}
.child-em {
font-size: 1.5em; /* 1.5 * 20px = 30px */
}
.child-rem {
font-size: 1.5rem; /* 1.5 * 16px = 24px */
}
გამოიყენეთ rem გლობალური ზომებისთვის, რათა თავიდან აიცილოთ მოულოდნელი ცვლილებები, და em — როდესაც გსურთ მასშტაბირება ადგილობრივ კონტექსტთან მიმართებაში.