Shrift o'lchamlarini o'zgartirish uchun Ems-dan foydalanish
Veb-sahifa tashkil qilganda, ko'pchilik mutaxassislar ems, exs, percentages yoki pixels kabi nisbatan o'lchovli fontlar (va aslida hamma narsani) tavsiya etadi. Buning sababi, kimdir sizning kontentingizni ko'rishi mumkin bo'lgan har xil usullarini bilmasligingiz. Va mutlaq o'lchov (dyuym, santimetr, millimetr, ballar yoki picalar) dan foydalansangiz, u turli qurilmalarda sahifaning ekranini yoki o'qilishi mumkinligiga ta'sir qilishi mumkin.
Va W3C sizga emlar uchun sizdan foydalanishni tavsiya qiladi.
Ammo qanchalik katta?
W3C ga ko'ra:
"ishlatiladigan elementning" shrift o'lchami "xususiyatining hisoblangan qiymatiga teng bo'lsa," em "harfining o'lchami xususiyatining o'zida paydo bo'lganda istisnodir, bu holda u" yuqori elementning shrift hajmiga o'tkaziladi. "
Boshqacha aytganda, emlarning mutlaq kattaligi yo'q. Ular o'zlarining qaerda joylashganligiga qarab o'lchov qiymatlarini qabul qilishadi. Ko'pchilik veb-dizaynerlar uchun bu veb brauzerda ekanligi, shuning uchun uzunligi bir shrift ushbu brauzer uchun standart shrift hajmiga teng bo'ladi.
Lekin standart o'lcham qanchalik baland? Mijozlar brauzerlarda o'zlarining shrift hajmini o'zgartirishi mumkinligi sababli, 100% ishonchli bo'lishi mumkin emas, lekin ko'pchilik odamlar brauzerlarning ko'pchiligi 16px hajmdagi shrift hajmiga ega deb hisoblamaydilar. Shuning uchun ko'pincha 1em = 16px .
Pixels-da o'ylang, o'lchov uchun Ems-ni ishlating
Standart shrift o'lchami 16px ekanligini bilganingizdan so'ng, mijozlaringizni sahifani osongina o'zgartirishga ruxsat berish uchun ems ni ishlatishingiz mumkin, lekin shrift o'lchamlari uchun piksel deb o'ylashingiz mumkin.
Aytaylik, shunday tuzilishga ega bo'lasiz:
- Sarlavha 1 - 20px
- Sarlavha 2 - 18px
- Sarlavha 3 - 16px
- Asosiy matn - 14px
- Quyi matn - 12px
- Izohlar - 10px
Siz ularni o'lcham uchun piksel yordamida shu tarzda belgilashingiz mumkin, lekin keyin IE 6 va 7 dan foydalangan har bir kishi sahifangizni yaxshilashga qodir emas. Shunday qilib, o'lchovlarni ems ga aylantirishingiz kerak va bu faqat matematik masaladir:
- Sarlavha 1 - 1.25em (16 x 1.25 = 20)
- Sarlavha 2 - 1.125em (16 × 1.125 = 18)
- Sarlavha 3 - 1em (1em = 16px)
- Asosiy matn - 0.875 (16 x 0.875 = 14)
- Quyi matn - 0.75 (16 x 0.75 = 12)
- Izohlar - 0.625 (16 x 0.625 = 10)
Merosni unutma!
Lekin bularning barchasi emslarga tegishli emas. Siz esda tutishingiz kerak bo'lgan boshqa narsalar, ular ota-onaning kattaligiga tushishidir. Shunday qilib, siz turli xil shrift o'lchamlari bilan elementlar o'rnatilgan bo'lsa, siz kutganingizdan kattaroq yoki katta shrift bilan tugatishingiz mumkin.
Misol uchun, bunday uslublar varag'i bo'lishi mumkin:
P {harflarning o'lchami: 0.875em; }
.footnote {font-size: 0.625em; }
Bu asosiy matn va dipnotlar uchun 14px va 10px bo'lgan shriftlarga olib keladi. Agar siz xatboshidagi paragrafni kiritsangiz, matnni 10px o'rniga 8,75px bo'lgan tugatishingiz mumkin. Buni o'zingiz ko'ring, yuqorida keltirilgan CSS-ni va quyidagi HTMLni hujjatga qo'ying:
Ushbu shrift 14px yoki balandligi 0.875 ems.
Ushbu paragrafda bu izoh mavjud.
Bu faqat izohli xat.
Izoh matn 10pxda o'qish qiyin, u 8,75px da deyarli o'qib bo'lmaydigan.
Shunday qilib, siz ems foydalanayotganingizda, siz ota-onalarning o'lchamlari haqida juda xabardor bo'lishingiz kerak yoki siz sahifangizda ba'zi bir chindan ham kattalikdagi elementlarga ega bo'lasiz.