آشنایی با 15 واحد نسبی CSS

گردآوری و تالیف : عرفان کاکایی
تاریخ انتشار : 13 آبان 1397
دسته بندی ها : css

اگر در حال خواندن این مقاله هستید، مطمئن که حداقل ۵ راه برای قرار دادن عناصر 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 «水» (چینی، ژاپنی، کره‌ای) است، پس می‌تواند به صورت «شمارش ایدئوگراف»‌ تفسیر شود.

برخی از این موارد بسیار عجیب و نارایج هستند، اما مطمئنم که هر کدام از آن‌ها موقعیت استفاده و دلایل وجود خود را دارند. کدام یک از آن‌ها مورد علاقه شما بود؟

منبع

مقالات پیشنهادی

دییسبا فریمورکی بر پایه css و javascript

دییسبا یک سیستم طراحی وب است برای برنامه نویسی آسان و راحت برای کسانی که کمترین آشنایی با وب را دارند، یا حتی برای افراد حرفه ای دییسبا بر پایه سی اس...

۱۰ کاراکتر طراحی شده با HTML و CSS

من همیشه از اینکه می‌بینم چکارهایی با سی‌اس‌اس می‌ توان انجام داد، شگفت زده می‌شوم. توسعه دهندگان وب می‌دانند که با سی‌اس‌اس می‌توان لایه‌های خارق الع...

افکت دادن به تصاویر با CSSCO

CSSCO یک ابزار برای فیلترکردن تصاویر (افکت دادن ) با استفاده از css است . که به راحتی با اضافه کردن چند کلاس میتوانید به تصاویر خود با استفاده از این...

ایجاد اشکال مثلثی با css بدون هک های مسخره

هر کسی که با css کار میکنه میدونه که اشکال مثلثی شکل رو نمیشه خیلی ساده و راحت ایجاد کرد و برای ایجاد چنین چیزهای احتیاج به روش های مختلف و خسته کننده...