გამოწერაგამოწერა
საკმაოდ ბევრი დამწყები დეველოპერისთვის გაურკვეველია CSS-ის ამ ორი ერთეულის მნიშვნელობა, ესენია rem და em საზომი ერთეულები, დღევანდელ ბლოგში გავარკვევთ თუ რა განსხვავებაა ამ ორ ერთეულს შორის და რატომაა საჭირო მათი თვისებების ცოდნა.
მოცემული ერთეულები ძირითადად გამოიყენება font-size, margin, padding და კიდევ სხვა თვისებების ზომებისთვის.
em ერთეულიგანვიხილოთ em ზომის ერთეული. ეს ერთეული გამოითვლება მისი მშობელი ელემენტის შრიფტის ზომის მიხედვით ანუ font-size-ით, ხოლო თუ მის მშობელს არ აქვს განსაზღვრული font-size თვისება, დოკუმენტის ხეში მიყვება მშობლის შემდეგ ყველა წინაპარ ელემენტს.
იმ შემთხვევაში თუ მის არცერთ წინაპარს არ ქონდა ფონტის ზომა გაწერილი, აიღებს ბრაუზერის ე.წ. საწყისი მნიშვნელობის font-size-ს, რომელიც როგორც წესი 16px-ია
თუ მშობელი ელემენტის font-size თვისების მნიშვნელობა არის 16px, მაშინ 1em = 16px-ის.
მაგალითი:
/* მშობელი ელემენტის ფონტის ზომა 16px */
.parent {
font-size: 16px;
}
.child {
font-size: 1.5em; /* 1.5 * 16px = 24px */
}
როგორც მაგალითშია მოყვანილი ვინაიდან .parent ელემენტის font-size არის 16px, 1em იქნება ასევე 16px-ის ზომის, ხოლო თუ .parent ელემენტი იქნებოდა 20px, 1em იქნებოდა 20px-ის ტოლი და ასე შემდეგ.
rem ერთეულიგავნიხილოთ rem საზომი ერთეული. მოცემული ერთეული მუშაობს em ერთეულის მსგავსად, უბრალოდ ის დამოკიდებულია არა მის უშუალო მშობელზე არამედ ეგრედ წოდებულ root ელემენტზე, რომელიც html-ში წარმოადგენს <html> თეგს.
მაგალითი:
html {
font-size: 16px; /* Default browser size */
}
h1 {
font-size: 2rem; /* 2 * 16px = 32px */
}
rem ერთეულის ზომაც მუშაობს ანალოგიურად, როგორც em განსხვავება მხოლოდ იმაშია, რომ მისი ზომა გამოითვლება აუცილებლად root ელემენტიდან.
თუ ზემოთ მოყვანილ მაგალითს გავარჩევთ, ვინადიან html ელემენტის ზომა არის 16px, 1rem იქნება 16px, ხოლო 2rem 16*2-ზე რაც 32px-ს წარმოადგენს.
მოცემული ერთეულები ძირითადად გამოიყენება ადაპტირებული ვებ-გვერდებში.
იმის მაგივრად, რომ ყველა ჩვენს მიერ განსაზღვრულ ელემენტს ცაცლ-ცალკე გავუწეროთ ზომები, მარტივად მაგალითად root ელემენტის ზომების შეცვლით შეგვიძლია ვცვალოთ მთელი დიზაინი.
HTML:
<button class="btn">Click Me</button>
CSS:
html {
font-size: 16px;
}
.btn {
font-size: 1rem; /* 16px */
padding: 0.5rem 1rem; /* 8px top/bottom, 16px left/right */
}
@media (max-width: 768px) {
html {
font-size: 14px; /* Smaller font size */
}
}
@media (max-width: 480px) {
html {
font-size: 12px; /* Smallest font size */
}
}
