Matn o‘lchami
Nega
Ba’zi insonlar harflarni idrok eta olishi uchun kattaroq matnga muhtoj.
Nima
Foydalanuvchilar butun interfeysni kattalashtirmasdan matn o‘lchamini o‘zgartira olishi kerak.
Bu operatsion tizim yoki brauzer sozlamalarida amalga oshiriladi. Buni qilishning ko‘plab usullari bor. Stol kompyuteridagi Chrome brauzerida shrift o‘lchamini sozlamalardagi Appearance va Customize fonts bo‘limlarida belgilashingiz mumkin.
Qanday
Keling, stol kompyuteri yoki noutbukdagi Chrome brauzerida Hindistondagi LG veb-saytini ochamiz.
Brauzerning sukut bo‘yicha sozlamalarida Most popular bo‘limi shunday ko‘rinadi.
Brauzer sozlamalari
Endi Chrome brauzeringizda shrift o‘lchamini 40 pikselga o‘rnating. Bu sukut bo‘yicha o‘lchamdan 2.5 baravar katta. Ko‘rish qobiliyati past foydalanuvchilar uchun bu unchalik ko‘p emas.
.model-name {
font-size: 18px;
line-height: 22px;
height: 66px;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
}
Nisbiy birliklar
Buni hal qilish uchun px o‘rniga rem birligini sinab ko‘ramiz. Agar asosiy o‘lcham 16 px bo‘lsa, 18 px 1.125 remga teng.
.model-name {
font-size: 1.125rem;
line-height: 22px;
height: 66px;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
}
Buning bir nechta sababi bor. Avvalo, line-height piksellarda belgilangan. Shrift o‘lchamidagi kabi, qator balandligini belgilashda ham mutlaq birliklardan qochishimiz kerak. line-height qiymatini uzunlik o‘rniga birliksiz son bilan belgilash mumkin. Bu holatda line-height: 22px; o‘rniga line-height: 1.2; dan foydalanishimiz mumkin
Mahsulot nomi konteynerida height: 66px; bor – matnni kattalashtirishni qo‘llab-quvvatlamoqchi bo‘lsangiz, bu yaxshi fikr emas. Keling, bu mutlaq balandlikni olib tashlab ko‘ramiz.
Oxirgi muammo — bu mahsulot nomida matnni uch qator bilan cheklaydigan -webkit-line-clamp: 3; bor. Muhim ma’lumot yo‘qoladi.
.model-name {
font-size: 1.125rem;
line-height: 1.2;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
}
Natija
Nihoyat, katta va o‘qilishi oson matn.
Bu kurs matn o‘lchamini o‘zgartirishni qo‘llab-quvvatlashning barcha usullarini qamrab olmaydi. Asosiy xulosalar: o‘zingiz kodlagan saytlarni sinab ko‘ring va nisbiy birliklardan foydalanishga intiling.
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!