طراحی وب: ۲- اندازه‌ها

واحدهای اندازه‌گیری در CSS بسیار کاربرد دارد. چون بسیاری از پراپرتی‌های یک المنت HTML اندازه‌ای را تعیین می‌کند. و دادن اندازه یک چیز به صورت یک عدد بدون واحد، بی‌فایده است. به عنوان نمونه اگر شما بخواهید width یک عکس را مشخص کنید، و تنها یک عدد بدهید (مثلا ۲۰) و واحد آن را مشخص نکنید، نوشتن این عدد هیچ ارزشی ندارد. پس تعیین واحد برای معنا دادن به اعداد بسیار مهم است.

پراپرتی‌های بسیاری به تعیین واحد نیاز دارند. از جمله:

width, Height, margin, padding, border, border-radius, shadow, font-size, …

واحدها به دو نوع اصلی دسته بندی می‌شوند:

• مطلق – Absolute
• نسبی – Relative

مطلق – Absolute

واحدهای اندازه‌گیری مطلق به چیز دیگری وابسته نیست.

• px (pixels) : 1 px = 1/96 of 1 inch
• pt (points) : 1 pt = 1/72 of 1 inch
• pc (picas) : 1 pc = 1/6 of 1 inch

• in (inch) : 1 in = 25.4 mm
• cm (centimeter) : 1 cm = 10 mm
• mm (millimeter)

نسبی – Relative

واحدهای اندازه‌گیری نسبی به اندازه پنجره بروزر، المنت پرنت، فونت یا چیز دیگری وابسته است.

• % (Percent) : Relative to the parent element

• em : 1 em = font-size of the element
• rem : 1 rem = font-size of the root element

• vw : 1 vw = 1% viewport width
• vh : 1 vh = 1% viewport height
• vmin : 1 vmin = 1% smaller length of vw or vh
• vmax : 1 vmax = 1% larger length of vw or vh

درصد %

واحد % هر جایی معنای خودش را دارد:

• font-size: نسبت به font-size پرنت
• width: نسبت به width پرنت
• height: نسبت به height پرنت
•  …

em / rem

حرف M اگر به صورت Capital نوشته شود، طول و عرض آن مساوی است. و درون یک مربع را پر می‌کند. اندازه ضلع این مربع را یک em می‌گویند. بنابراین در هر المنتی 1em برابر font-size همان المنت است. و اندازه  1em در یک المنت با یک المنت دیگر ممکن است متفاوت باشد. اگر برای اندازه font-size از این واحد استفاده شود، براساس font-size پرنت محاسبه می‌شود.

و اما rem کوتاه شده root em است. و root به معنای ریشه است و در اینجا منظور المنت html است. که همه المنت‌ها را دربرمی‌گیرد. بنابراین مقدار 1rem همه جا با هم برابر است. و برابراست با font-size المنت html.

نکته‌‌هایی برای اندازه فونت:

• در المنت html واحد em یا rem را به کار نبرید.
• در بخش‌های اصلی مثل header یا footer یا … از واحد rem استفاده کنید.
• در جاهای دیگر از em استفاده کنید.

سعی کنید برای تعیین اندازه هر چیز در هر جایی از واحد em یا rem استفاده کنید. با این کار اگر بخواهید محتوای سایت خود را درشت‌تر یا ریزتر کنید، بسیار ساده خواهد بود. تنها اندازه فونت html را تغییر دهید.

/* Root */
html {font-size: 16px;}

/* Components */
header {font-size: 1.5rem;}
footer {font-size: 0.75rem;}
main {font-size: 1.0rem;}

/* Text Elements */
p {font-size: 1em;}

h1 {font-size: 2em;}
h2 {font-size: 1.5em;}
h3 {font-size: 1.17em;}
h4 {font-size: 1em;}
h5 {font-size: .83em;}
h6 {font-size: .75em;}

p,h1,h2,h3,h4,h5 {
    margin-top: .5em;
    margin-bottom: .25em;
}

ویوپورت Viewport

ویوپورت به معنای گستره دیدگاه است. یعنی جایی که محتوای سایت نمایش داده‌ می‌شود. (فضای درونی پنجره بروزر) ویوپورت یک مستطیل است بنابراین همیشه width و height دارد.

۱- vw: مقدار  100vw برابر است با width ویوپورت.

۲- vh: مقدار  100vh برابر است با height ویوپورت.

۳- vmin: مقدار  100vmin برابر است با width یا height ویوپورت، هرکدام کوچکتر است.

۴- vmax: مقدار  100vmax برابر است با width یا height ویوپورت، هرکدام بزرگتر است.

مثال

در این مثال می‌خواهیم یک مربع در میان صفحه نمایش داده شود. و با بزرگ و کوچک کردن پنجره بروزر اندازه مربع نیز تغییر کند.

main {
    margin: 10vmin;
    width: 80vmin;
    height: 80vmin;
}

گوشه فریم بالا را بگیرید و آن را بزرگ و کوچک کنید و نتیجه را ببینید.

تمرین ۱

• این فایل را دانلود کنید.
• آن را در فولدر web2 باز کنید.
• در آن تغییراتی بدهید تا عکس مورد نظر همانند تصویر زیر در وسط صفحه باشد. و با تغییر اندازه بروزر کوچک و بزرگ شود.

متغیرها – Variables

تعریف:

element {
    --main-bg-color: brown;
}

استفاده:

element {
    background-color: var(--main-bg-color);
}

وراثت Inheritance

<div class="one">
    <div class="two">
        <div class="three"></div>
        <div class="four"></div>
    </div>
</div>

.two {
    --test: 10px;
}

.three {
    --test: 16px;
}

The results of var(–test) for class:

• .one – invalid
• .two – 10px
• .three – 16px
• .four – 10px (inherited)

Fallback Values

.two {
    /* Red if --my-var is not defined */
    color: var(--my-var, red);
}

.three {
    /* pink if my-var and --my-background are not defined */
    background-color: var(--my-var, var(--my-background, pink));
}

متغیرهای نامعتبر

:root { --text-color: 16px; }

p {
    color: blue;  
    color: var(--text-color);
}

تمرین ۲

• این فایل را دانلود کنید.
• آن را در فولدر web2 باز کنید.
• از variable استفاده کنید، تا عکس مورد نظر همانند تصویر زیر در وسط صفحه باشد.

محاسبات

Operators:

• + Addition
• – Subtraction
• * Multiplication
• / Division

Values:

• number
• percentage
• angle
• time

calc( ) Examples

element {
    margin-left: calc(50% + 20px);
    width: calc(50% - 3em);
    font-size: calc(1.5rem + 3vw);
    width: calc(40% + 20px - 1em);
    height: calc(100vh / 7 * 3);
    width: calc((100% + 60px) / 3);

    --ht: 4em;
    height: calc(var(--ht) + 7px);

}

Example: Position Background Image

css

element {
    background-position: calc(100% - 20px) calc(100% - 20px);
}

گوشه فریم بالا را بگیرید و آن را بزرگ و کوچک کنید و نتیجه را ببینید.

تمرین ۳

• این فایل را دانلود کنید.
• آن را در فولدر web2 باز کنید.
• با روش مثال بالا تغییراتی در آن بدهید تا همانند ویدیوی زیر همیشه در مرکز صفحه باشد.