وحدات Viewport

جزء من قسم التنسيق باستخدام CSS في رحلة HTML على Coddy. الدرس 64 من 76.

في CSS، وحدات إطار العرض هي وحدات قياس نسبية تعتمد على حجم إطار عرض المتصفح (المنطقة المرئية من صفحة الويب). وهي تتيح إنشاء تصميمات متجاوبة من خلال تحديد أحجام العناصر والنصوص بما يتناسب مع عرض إطار العرض أو ارتفاعه. وتفيد وحدات إطار العرض خصوصًا في إنشاء تخطيطات مرنة، وتغيير حجم النصوص، وتحديد مواضع العناصر بطريقة تتكيف مع أحجام الشاشات المختلفة.

هناك أربع وحدات لإطار العرض:

vw (عرض إطار العرض): يمثّل 1% من عرض إطار العرض. على سبيل المثال، 10vw يساوي 10% من عرض إطار العرض.

vh (ارتفاع إطار العرض): يمثّل 1% من ارتفاع إطار العرض. على سبيل المثال، 25vh يساوي 25% من ارتفاع إطار العرض.

vmin (الحد الأدنى لإطار العرض): تمثل 1% من البُعد الأصغر لإطار العرض (العرض أو الارتفاع). على سبيل المثال، إذا كان إطار العرض أعرض مما هو مرتفع، فإن 5vmin تساوي 5% من ارتفاع إطار العرض.

vmax (الحد الأقصى لنافذة العرض): يمثّل 1% من البُعد الأكبر لنافذة العرض (العرض أو الارتفاع). على سبيل المثال، إذا كان عرض نافذة العرض أكبر من ارتفاعها، فإن 8vmax يساوي 8% من عرض نافذة العرض.

إليك الصياغة الأساسية لاستخدام وحدات منفذ العرض:

selector {
    property: value;
}

selector: محدِّد CSS الذي يستهدف عناصر HTML التي تريد تنسيقها.

property: خاصية CSS التي تريد تعيينها (مثل width وheight وfont-size وmargin وpadding).

value: قيمة تتضمن وحدات إطار العرض (مثل 50vw و75vh و10vmin و5vmax).

على سبيل المثال:

.box {
    width: 50vw; /* سيكون عرض الصندوق 50% من عرض نافذة العرض */
    height: 30vh; /* سيكون ارتفاع الصندوق 30% من ارتفاع نافذة العرض */
}

في هذا المثال، يبلغ عرض العنصر .box 50vw وارتفاعه 30vh، مما يجعله متجاوبًا مع عرض إطار العرض وارتفاعه.

التحدي

سهل

لديك مستند HTML يتضمن عنوانًا (<h1>)، وفقرة (<p>)، وعنصر تقسيم (<div>). مهمتك هي استخدام وحدات إطار العرض لجعل هذه العناصر متجاوبة. اتبع الخطوات أدناه:

اكتب قاعدة CSS تستهدف العنصر <h1>. عيّن قيمة font-size إلى 6vw.
اكتب قاعدة CSS تستهدف العنصر <p>. عيّن قيمة font-size إلى 4vmin.
اكتب قاعدة CSS تستهدف العنصر <div>. عيّن قيمة width إلى 80vw وقيمة height إلى 50vh.

جرّب بنفسك

<html>
<head>
    <title>Viewport Units</title>
    <style>
        /* Write CSS rules here */
    </style>
</head>
<body style="background-color:lightblue">
    <h1>Antarctica</h1>  
    <p>The coldest continent, covered in ice and home to penguins and seals.</p>  
    <div>It has no permanent residents, only research stations.</div> 
</body>
</html>