ما وظيفة vmin و vmax في CSS؟

• إجابة السؤال الأول 

    لتوضيح الوظيفة لكل من vmin و vmax يجب عليك معرفة المقصود بـ vw , vh ،

    vw : النسبة المئوية لعرض النافذة بينما vh : النسبة المئوية لارتفاع النافذة و vmin و vmax يرتبطان بالحد الأدنى            والحد الأقصى لعرض وارتفاع النافذة .

    مثال لتوضيح الوظيفة 

1. إذا كنت تستخدم vw , vh لتعيين حجم الخط (على سبيل المثال ، 5vw) يختلف حجم الخط في الشاشات الأفقية والعمودية ، هنا يمكنك استخدام vmin و vmax لجعل حجم النص متناسقاً مع جميع أحجام الشاشات الأفقية والعمودية . 
2. مثال آخر ، حين إنشاء عنصر يكون ملامس بشكل دائم لجانبي الشاشة على الأقل ، يمكنك  عمل التالي 

.box {
height: 100vmin;
    width: 100vmin;
}

    عند استعمال ارتفاع وعرض محددين بقيمة vmin تحت 100 فسوف يطبق الكود السابق 

• إجابة السؤال الثاني 

    فقط تستخدم لتعين حجم الخط ، ولا يمكن استعمالها لكل العناصر 

• إجابة السؤال الثالث 

   ما سوف يحدث يتعلق بعرض وارتفاع الشاشة في حال أعطيت قيمة غير مناسبة سوف تتداخل العناصر في بعضها 

• إجابة السؤال الرابع 

  يستخدم المصممين vw , vh لأنها تعتمد بشكل كبير على النسبة المئوية لعرض وارتفاع الشاشة مثلاً (1vw تعني أن عرض    النافذة هو 1٪) وسوف يسهل تقسم Grids في الصفحة .

بتاريخ 23 دقائق مضت قال أسامة زيادة:

• إجابة السؤال الأول 

    لتوضيح الوظيفة لكل من vmin و vmax يجب عليك معرفة المقصود بـ vw , vh ،

    vw : النسبة المئوية لعرض النافذة بينما vh : النسبة المئوية لارتفاع النافذة و vmin و vmax يرتبطان بالحد الأدنى            والحد الأقصى لعرض وارتفاع النافذة .

    مثال لتوضيح الوظيفة 

1. إذا كنت تستخدم vw , vh لتعيين حجم الخط (على سبيل المثال ، 5vw) يختلف حجم الخط في الشاشات الأفقية والعمودية ، هنا يمكنك استخدام vmin و vmax لجعل حجم النص متناسقاً مع جميع أحجام الشاشات الأفقية والعمودية . 
2. مثال آخر ، حين إنشاء عنصر يكون ملامس بشكل دائم لجانبي الشاشة على الأقل ، يمكنك  عمل التالي 

.box {
height: 100vmin;
    width: 100vmin;
}

    عند استعمال ارتفاع وعرض محددين بقيمة vmin تحت 100 فسوف يطبق الكود السابق 

• إجابة السؤال الثاني 

    فقط تستخدم لتعين حجم الخط ، ولا يمكن استعمالها لكل العناصر 

• إجابة السؤال الثالث 

   ما سوف يحدث يتعلق بعرض وارتفاع الشاشة في حال أعطيت قيمة غير مناسبة سوف تتداخل العناصر في بعضها 

• إجابة السؤال الرابع 

  يستخدم المصممين vw , vh لأنها تعتمد بشكل كبير على النسبة المئوية لعرض وارتفاع الشاشة مثلاً (1vw تعني أن عرض    النافذة هو 1٪) وسوف يسهل تقسم Grids في الصفحة .

شكرا جزيلا على الإجابة, لكن لم أفهم إجابتك على السؤال الأول أرجو منك المزيد من التوضيح.

بتاريخ 16 دقائق مضت قال مصطفى اوريك:

شكرا جزيلا على الإجابة, لكن لم أفهم إجابتك على السؤال الأول أرجو منك المزيد من التوضيح.

المعنى أن وحدات القياس vmin و vmax تساعد بشكل كبير في Responsive أثناء تصميم الموقع وعدم تتداخل العناصر في بعضها ، لذلك يقوم المصممين في استخدام لتعامل مع عرض وارتفاع نافذة التصفح . 

يمكنك النظر على هذا المقال ، يحتوى على شرح وحدات القياس المنسوبة إلى النّافذة (Viewport)

بتاريخ 5 ساعات قال مصطفى اوريك:

1- ما هي وظيفة كلا من vmin و vmax ؟

• vmin: تدل على القيمة الأصغر بين الطول والعرض للنافذة
• vmax: تدل على القيمة الأكبر بين الطول والعرض للنافذة

بتاريخ 5 ساعات قال مصطفى اوريك:

2- بالنسبة للوحدات التالية : em ,rem, هل تستخدم فقط لوضع المقاسات للخطوط أم تستخدم أيضا في وضع مقاسات للحاويات و غيرها من العناصر ؟ إذا كان يمكن إستخدامها لكل العناصر فكيف تعملان عندها ؟

يمكنك استخدامهما اينما شئت، قيمتهما تساوي القيمة التي تضعها × حجم الخط (حجم خط عنصر html الرئيسي ل rem، وحجم الخط الموروث لـ em)
بما انها قيمة متعلقة بحجم الخطوط فهي تفيد في بناء هرمية قياسات لخطوط متعددة متناسقة، ولكن انت حر باستخدامها اينما شئت

بتاريخ 5 ساعات قال مصطفى اوريك:

3-ماذا سيحدث لو وضعنا لعنصر معين height يساوي 12vm مثلا و ليست 12vh ?

• 12vmin: سيكون ارتفاع العنصر مساوي لـ 12% من طول أو عرض النافذة (حسب أيهما أصغر) 
• 12vh: سيكون ارتفاع العنصر مساوي لـ 12% من طول النافذة حصرًا 

بتاريخ 5 ساعات قال مصطفى اوريك:

لماذا يستخدم الناس min-width -أو min-height- إذا كانوا سيضعون القيمة Xvm -أو Xvh- (X إعتبروه رقما) ? , ألا يكفي استخدام خاصية width -أو height- لهذا, فالعنصر الذي به هذه القيم سيتغير ليناسب عرض الجهاز -أو إرتفاعه-

• min-width: أقل عرض ممكن للعنصر
• min-height: أقل طول ممكن للعنصر

ماذا لو أردت أن يبقى أقل عرض لعنصر ما مساويًا دوما ل 50% من "عرض الشاشة" وليس من عرض العنصر الأب المباشر له، هنا تحتاج لقيمة 50 vw