اگر در حال خواندن این مقاله هستید، مطمئن که حداقل ۵ راه برای قرار دادن عناصر HTML با استفاده از CSS بلدید. پس ۱۵ گزینه برای اندازه‌گذاری نسبی نباید برای شما تعجب آور باشد. بگذارید حقیقت را به شما بگویم، برخی از آن‌ها عجیب و غریب هستند.
من این توییت را دیدم که توسط یک معلم JavaScript ارسال شده بود. من فقط ۵ تا ۷ مورد از این موارد را می‌شناختم، و دیدن این توییت باعث شد که ترس عقب افتادن به من دست دهد. پس تصمیم گرفتم که این مقاله را بنویسم و از بروز این اتفاق برای شما جلوگیری کنم. توییت مربوطه:
«عصر بی نقصی پیکسل در راه است. حال ۱۴ واحد تغییر اندازه در CSS داریم: em، ex، cap، ch، ic، rem، lh، rlh، vw، vh، vi، vb، vmin، vmax»
واحدهای نسبی چه هستند و چرا به آن‌ها نیاز داریم؟
آیا تا به حال برای شما سوال شده است که آیا هیچ کدام از صفحاتی که شما دارید، اندازه و ابعاد مشابهی ندارند؟ اما همه آن‌ها صفحات وب را نمایش می‌دهند. پس صفحات وب نیاز دارند تا به گونه‌ای استایل‌بندی شوند که با مقادیر نسبی جهت نمایش (یا هر عنصر HTML دیگری) تطبیق داشته باشند.
به طور خلاصه، ساخت چنین طرح‌های پاسخگو و وقف‌پذیری، کاملا ممکن است.
1- em غیر قابل پیش‌بینی
به نسبت font-size (اندازه فونت) عنصر فعلی. (2em یعنی دو برابر سایز فونت فعلی) یک ویژگی طول وابسته به font-size.
.post {
font-size: 24px;
border-left: 0.25em solid #4a90e2;
}
/* The border-left-width will compute to 6px. */
کار کردن با em با توجه به این که مقدارش به طور نسبی از عنصر والدش می‌آید، می‌تواند پیچیده باشد. در مورد عناصر تو در تو، وقتی که والد مقدار em را نیز دارد، پیچیده می‌شود.
2- rem نجات دهنده
درست به مانند em، اما به نسبت اندازه فونت عنصر ریشه سند مورد نظر.
p {
margin-left: 1rem;
}
h4 {
font-size: 2rem;
}
/* Unlike the em, which may be different for each element, the rem is constant throughout the document */
برای این تکنیک، اساسی است که اندازه فونت پایه خود را تنظیم کنید، که معمولا بر حسب مقدار پیش فرض مرورگر ۱۶ پیکسل می‌باشد.
۳ و ۴ - vh و vw
بر خلاف em و rem که به نسبت اندازه فونت هستند، vh و vw به نسبت اندازه نمایشگر کار می‌کنند.
1vh = 1% یا 1/100 ارتفاع صفحه نمایش
1vw = 1% یا 1/100 عرض صفحه نمایش
ممکن است برخی وبسایت‌های دارای یک نوع تایپوگرافی را دیده باشید که همینطور که شما صفحه مرورگر خود را تغییر اندازه میدهید، به زیبایی مقیاس‌بندی می‌شوند. vw و vh این کار را ممکن می‌کنند.
۵ و ۶- vmax و vmin
حداکثر صفحه نمایش و حداقل صفحه نمایش: 1vw یا 1vh، هر کدام که به ترتیب بزرگ‌تر یا کوچک‌تر باشد.
1vmax = 1% یا 1/100 مقدار بزرگ‌تر بین 1vw یا 1vh.
1vmin = 1% یا 1/100 مقدار کوچک‌تر بین 1vw یا 1vh.
7- «%» قدیمی
«%» بسیار معروف بوده، و دوست همه می‌باشد. این مورد، به نسبت عنصر والد خود کار می‌کند.
.post {
font-size: 24px;
}
.post-category {
font-size: 85%;
}
.post-title {
font-size: 135%;
}
/*
Child elements with % font sizes...
85%
0.85 * 24 = 20.4 px
135%
1.35 * 24 = 32.4 px
*/
حال بیاید به برخی از موارد مبهم و ناشناخته وارد شویم.
8 و 9 - vi و vb آزمایشی
این API آزمایشی برای استفاده در محصولات مناسب نیست؛ زیرا هنوز توسط هیچ مرورگری پشتیبانی نشده است.
1vb = 1% اندازه بلوک محفظه اولیه، در جهت محور بلوک عنصر.
1vh = 1% اندازه بلوک محفظه اولیه، در جهت محور خطی عنصر.
با توجه به این که تعداد آن‌ها کم است، آنچنان معروف و تحت استفاده نیستند.
10 و 11- lh و rlh
این دو مورد مانند em و rlh هستند، اما به جای اندازه فونت، به ارتفاع خط بستگی دارند.
1h = معادل مقدار محاسبه شده ویژگی line-height عنصری که بر روی آن استفاده شده است.
rlh = معادل مقدار محاسبه شده ویژگی line-height عنصر ریشه.
12- ex
واحد **ex** به ندرت استفاده می‌شود. هدف آن این است که اندازه‌هایی که باید به x-height یک فونت بستگی داشته باشند را بیان کند. x-height ارتفاع حروف کوچک مانند «a، c، m یا o» است.
13- cap
این مورد، اندازه cap-height است. cap-height معادل «ارتفاع حروف بزرگ» می‌باشد.
14- ch
نمایانگر عرض کاراکتر «0»، یا به طور دقیق‌تر، اندازه علامت «0» در فونت عنصر است.
15- ic (ideograph count - شمارش ایدئوگراف)
ic معادل شرقی ch که در بالا به آن اشاره شد، می‌باشد. این مورد، اندازه ایدئوگراف CJK «水» (چینی، ژاپنی، کره‌ای) است، پس می‌تواند به صورت «شمارش ایدئوگراف» تفسیر شود.
برخی از این موارد بسیار عجیب و نارایج هستند، اما مطمئنم که هر کدام از آن‌ها موقعیت استفاده و دلایل وجود خود را دارند. کدام یک از آن‌ها مورد علاقه شما بود؟
دیدگاه و پرسش
در حال دریافت نظرات از سرور، لطفا منتظر بمانید
در حال دریافت نظرات از سرور، لطفا منتظر بمانید