وحدات Viewport

جزء من قسم Styling with CSS في رحلة HTML على Coddy — الدرس 64 من 76.

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

هناك أربع وحدات لمنطقة العرض (viewport):

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

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

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

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

إليك بناء الجملة الأساسي لاستخدام وحدات عرض المنفذ (viewport units):

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، مما يجعله مستجيباً لكل من عرض وارتفاع نافذة العرض (viewport).

التحدي

سهل

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

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

ورقة مرجعية

وحدات عرض المنفذ (Viewport units) هي وحدات نسبية تعتمد على حجم منفذ عرض المتصفح، وهي مفيدة لإنشاء تصميمات متجاوبة.

أربع وحدات لمنفذ العرض:

vw (عرض منفذ العرض): 1% من عرض منفذ العرض
vh (ارتفاع منفذ العرض): 1% من ارتفاع منفذ العرض
vmin (الحد الأدنى لمنفذ العرض): 1% من البعد الأصغر لمنفذ العرض
vmax (الحد الأقصى لمنفذ العرض): 1% من البعد الأكبر لمنفذ العرض

الصيغة الأساسية:

selector {
    property: value;
}

مثال:

.box {
    width: 50vw; /* 50% من عرض منفذ العرض */
    height: 30vh; /* 30% من ارتفاع منفذ العرض */
}

جرّب بنفسك

<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>