توجه إلى CSS Viewport Units vw ، vh ، vmin ، vmax

أطوال النسبة المئوية للعرض, أو وحدات viewport كما تتم الإشارة إليها بشكل متكرر ، هي وحدات CSS سريعة الاستجابة تسمح لك بتحديد الأبعاد كنسبة مئوية من العرض أو طول إطار العرض. يمكن أن تكون وحدات Viewport مفيدة جدًا في الحالات التي تكون فيها وحدات CSS سريعة الاستجابة ، مثل النسب المئوية بجد لجعل العمل.

برغم من وثائق W3C على وحدات viewport يحتوي على كل ما يمكن وضعه في النظرية ، فإنه ليس مطول جدا. لذلك ، في هذه المقالة ، سوف نلقي نظرة على كيفية وحدات CSS هذه العمل في الممارسة.

ارتفاع منفذ العرض (VH) و عرض منفذ العرض (فولكس فاجن)

W3C يعرف إطار العرض مثل “حجم الكتلة التي تحتوي على الأولي”. وبعبارة أخرى ، viewport هو المنطقة الواردة في نافذة المتصفح أو أي منطقة عرض أخرى على الشاشة.

ال فولكس فاجن و VH وحدات ضع النسبة المئوية للعرض والارتفاع في إطار العرض الفعلي. يمكن أن تأخذ قيمة بين 0 و 100 وفق القواعد التالية:

 100vw = 100٪ من عرض viewport 1vw = 1٪ من viewport view 100vh = 100٪ من ارتفاع viewport 1vh = 1٪ من ارتفاع viewport 

الاختلافات في وحدات النسبة المئوية

لذا ، كيف تختلف وحدات viewport عن الوحدات المئوية؟ وحدات النسبة المئوية يرث حجم العنصر الأصل في حين أن وحدات viewport لا. يتم احتساب وحدات Viewport دائمًا باسم النسبة المئوية لحجم منفذ العرض. نتيجة لذلك ، يمكن أن يتجاوز العنصر المحدد بواسطة وحدات viewport حجم الأصل.

مثال: أقسام ملء الشاشة

أقسام ملء الشاشة من المحتمل أن تكون حالات الاستخدام الأكثر شيوعًا لوحدات viewport.

ال HTML بسيط للغاية. لدينا فقط ثلاثة أقسام تحت بعضها البعض ونحن نريد كل منهم ل تغطية الشاشة بأكملها (ولكن ليس أكثر).

في CSS ، نستخدمها 100vh ك ارتفاع القيمة و 100٪ مثل عرض. نحن لا نستخدم فولكس فاجن وحدة هنا افتراضيا, تضاف أشرطة التمرير أيضا إلى حجم منفذ العرض. لذلك ، إذا استخدمنا العرض: 100vw. حكم أ شريط التمرير الأفقي سوف تظهر في أسفل نافذة المتصفح.

 * الهامش: 0 ؛ الحشو: 0؛  قسم الخلفية - الحجم: غطاء ؛ خلفية الموقف: مركز. العرض: 100 ٪ ؛ الارتفاع: 100 فولت ؛  .section-1 background-image: url ('https://assets.hongkiat.com/uploads/css-viewport-units-vw-vh-wmin-vmax/img1.jpg')؛  .section-2 background-image: url ('https://assets.hongkiat.com/uploads/css-viewport-units-vw-vh-wmin-vmax/img2.jpg')؛  .section-3 background-image: url ('https://assets.hongkiat.com/uploads/css-viewport-units-vw-vh-wmin-vmax/img3.jpg')؛  

على gif التجريبي أدناه ، يمكنك أن ترى ذلك VH هو حقا وحدة استجابة.

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

أود أن أقول ، لن أجرؤ على استخدام فولكس فاجن وحدة على تحجيم عناصر ملء الشاشة بسبب هذا السبب. نحن لسنا بحاجة لذلك ، كما العرض: 100 ٪ ؛ حكم يعمل تماما. مع تخطيطات ملء الشاشة ، كان التحدي الحقيقي دائمًا هو كيفية القيام بذلك تعيين قيمة الارتفاع المناسبة و ال VH وحدة يعطي حلا رائعا لذلك.

حالات الاستخدام الأخرى

إذا كنت مهتما في حالات الاستخدام الأخرى فولكس فاجن و VH Lullabot لديه مقال كبير يسرد حفنة من الأمثلة على الحياة الحقيقية (مع عروض Codepen) ، مثل:

• بطاقات نسبة ثابتة.
• الحفاظ على عنصر أقصر من الشاشة.
• تحجيم النص.
• الخروج من الحاوية.

يوجد لدى Opera.dev أيضًا برنامج تعليمي قصير حول كيف يمكنك الاستفادة من فولكس فاجن وحدة في خلق الطباعة استجابة.

لا يمكنك فقط استخدام وحدات viewport على عرض و ارتفاع الخصائص ولكن على أي واحد آخر. على سبيل المثال ، يمكنك ذلك ضبط حجم الحشوات والهوامش باستخدام فولكس فاجن و VH الوحدات أيضا.

عرض منفذ دقيقة (vmin) و viewport max (VMAX)

ال vmin و VMAX وحدات تسمح لك بالوصول إلى حجم أصغر أو أكبر الجانب من viewport ، وفقا للقواعد التالية:

 100vmin = 100vw أو 100vh ، أيهما أصغر 1vmin = 1vw أو 1vh ، أيهما أصغر 100vmax = 100vw أو 100vh ، أيهما أكبر 1vmax = 1vw أو 1vh ، أيهما أكبر 

لذلك ، في حالة اتجاه عمودي, 100vmin مساوي ل 100vw, كما viewport هو أصغر أفقيا من عموديا. لنفس السبب, 100vmax سوف تكون مساوية ل 100vh.

وبالمثل ، في حالة اتجاه أفقي, 100vmin مساوي ل 100vh, كما viewport هو أصغر عموديا من أفقيا. وبالطبع, 100vmax سوف تكون مساوية ل 100vw هنا.

مثال: اجعل نصوص البطل قابلة للقراءة على كل شاشة

ال vmin و VMAX الوحدات أقل شهرة على نطاق واسع من فولكس فاجن و VH. ومع ذلك ، يمكن استخدامها بشكل ممتاز ك بديلا عن التوجه @وسائل الإعلام الاستفسارات. على سبيل المثال, vmin و VMAX يمكن أن يكون مفيدًا عندما يكون لديك عناصر قد تبدو غريبة في نسب مختلفة الجانب.

يحتوي القانون الجديد على برنامج تعليمي رائع يناقشون فيه كيف يمكنك ذلك الحفاظ على نص البطل مقروء على كل شاشة ، باستخدام vmin وحدة. النصوص البطل هي عرضة للنظر صغير جدًا على الجوّال وكبير جدًا على الشاشات الكبيرة.

هنا هي الفكرة الرئيسية لحلها:

 h1 font-size: 20vmin؛ font-family: Avenir، sans-serif؛ وزن الخط: 900 ؛ محاذاة النص: المركز ؛  

في العرض التوضيحي Codepen ، يمكنك التحقق من كيف vmin يحل مشكلة قراءة نصوص البطل. الوصول إلى “صفحة كاملة” عرض على Codepen ، ثم تغيير حجم نافذة المتصفح الخاص بك سواء أفقيا وعموديا لمعرفة كيف يتغير نص البطل.

دعم المتصفح

كما ترون على مخطط CanIUse أدناه, دعم المتصفح جيد نسبيا لوحدات viewport. ومع ذلك ، ضع في اعتبارك أن بعض إصدارات IE و Edge لا تدعمها VMAX. أيضا ، دائرة الرقابة الداخلية 6 و 7 لديك مشكلة مع VH وحدة, الذي تم إصلاحه في دائرة الرقابة الداخلية 8.