لا يوجد مشكلة في إستخدام vh و vw  , فكرة الvh والvw هي أن يكون العرض والإرتفاع متناسب مع طول وعرض النافذة مما يساعد على جعل التصميم مُتجاوب , فإن هذا بالفعل هو إستخدامهما لذا ما تقوم به صحيح ولا يوجد فيه مشكلة

يفضل استخدام وحدات الـ vh و vw بدلاً من الـ px في التصميم لأنها تساعد على جعل الموقع أكثر استجابة وتتكيف مع حجم الشاشة المستخدمة. 

وحدات الـ vh تقاس بالنسبة إلى ارتفاع الشاشة، بينما وحدات الـ vw تقاس بالنسبة إلى عرض الشاشة. وبذلك، يمكن استخدام هذه الوحدات لتحديد حجم العناصر في الموقع بطريقة متجاوبة لأحجام شاشات مختلفة.

بالإضافة إلى ذلك، فإن استخدام وحدات الـ vh و vw يسهل على المصمم تغيير حجم العناصر في الموقع دون الحاجة إلى تغيير قيم px يدويًا. 

ولذلك، فإن استخدام وحدات الـ vh و vw يسهل على المصمم إنشاء تصاميم متجاوبة وسهلة التكيف مع أحجام شاشات مختلفة.

اقتباس

لكن لا اعلم اذا كان استخدامهم يفسد بيئة العمل او يجعل فهم الاوامر صعب

ليس هناك ضرر من استخدام  vh و vw ويفضل أن تستخدمهم بدلاً من px.

يعتبر استخدام ال px ليس أفضل شئ ولكن لا يمكنك استخدام ال vh و vw دائماً في جميع التنسيقات ومن مميزات استخدام vh و vw بدلا من الpx  هي:

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

بينما من عيوب استخدام vh و vw بدلا من الpx  هي:

• قد تحتاج إلى استخدام وحدات أخرى للتحكم في الحجم الأدنى أو الأقصى.
• قد تواجه مشاكل في التوافق مع بعض المتصفحات.
• قد تؤثر على قراءة المحتوى في بعض الأجهزة.

يفضل استخدام وحدات القياس rem في تصميم المواقع، يجب أن تعرف أن rem هي وحدة نسبية تعتمد على قيمة font-size للعنصر الأساسي (الجذري)، وهو عنصر الـ html1. بشكل افتراضي، تساوي قيمة font-size للعنصر الأساسي 16px1. لذلك، إذا كتبت:

p { font-size: 2rem; }

فهذا يعني أن حجم خط الفقرة سيكون ضعف حجم خط العنصر الأساسي، أي 32px1.

إذا أردت تغيير قيمة font-size للعنصر الأساسي، يمكنك كتابة:

html { font-size: 20px; }

وهذا سيؤثر على جميع العناصر التي تستخدم وحدة rem في حجم خطها1.

الفائدة من استخدام وحدات rem هي أنها تجعل الموقع متجاوب مع تغير حجم شاشة المستخدم، وتسهل التحكم في حجم خط جميع العناصر بشكل موحد

لذلك يعتبر استخدام الوحدات القياسية يختلف بحسب العناصر والتنسيقات المطبقة عليها فمثلاً ربما تحتاج لتحديد العرض لعنصر ما بنص قيمة العرض للعنصر الأب فتستخدام النسبة المئوية أفضل لذلك كل وحدة قياس مناسبة حسب التنسيقات والعناصر الموجودة ولكن من أكثر وحدات القياس التي تقوم باستخدامها هي ال rem

لا، لا يوجد أي ضرر في استخدام وحدات الـvh والـvw بدلاً من وحدات الـpx في تصميم الويب، بالعكس، فإن استخدام هذه الوحدات يعتبر أكثر مرونة وسهولة في التعامل مع الأحجام والأبعاد المختلفة للعناصر على صفحة الويب، خاصة عند عرضها على شاشات مختلفة الحجم.

عند استخدام وحدات الـpx، يتم تحديد الحجم بشكل ثابت وصلب، مما يعني أنه قد يؤدي إلى تشويش أو تشوه العناصر عند تغيير حجم الشاشة، خاصة عند استخدام شاشات ذات دقة عالية.

أما عند استخدام وحدات الـvh والـvw، فإنها تعتمد على نسبة الحجم النسبي للعنصر إلى حجم الشاشة، وبالتالي فهي أكثر مرونة وتتكيف بشكل أفضل مع أحجام الشاشات المختلفة، مما يؤدي إلى تحسين تجربة المستخدم والوصول إلى تصميم يتناسب مع جميع الأجهزة والشاشات.

ويمكنك أيضا استخدام وحدة الـrem و تستخدم لتحديد حجم الخطوط والمسافات والأبعاد في تصميم الويب، وهي وحدة نسبية تعتمد على حجم الخط المحدد للعنصر الأساسي في صفحة الويب (عادةً الجسم body).

على سبيل المثال، إذا كان حجم الخط المحدد للجسم body هو 16 بكسل، فإن قيمة 1rem ستعادل 16 بكسل، وإذا تم تعيين حجم الخط لعنصر ما بقيمة 2rem، فسيكون حجم الخط هو 32 بكسل (2 × 16 بكسل).

استخدام وحدة الـrem يتيح للمصممين تحديد الأحجام والأبعاد بشكل نسبي، مما يساعد على تعديل تصميم الويب بشكل أسهل وأكثر مرونة، خاصة عند تغيير حجم الشاشة أو عند استخدام شاشات مختلفة الحجم. كما أن استخدامها يجعل التعامل مع العناصر المتعددة في صفحة الويب أسهل وأكثر تنظيمًا.

ومع ذلك، يجب أن يتم استخدام وحدة الـrem بحذر، حيث يمكن أن تؤثر بشكل كبير على تصميم الويب إذا تم تحديد القيم بشكل غير مناسب. لذلك، ينبغي أن يتم تحديد حجم الخط المحدد للجسم body بشكل جيد وفقًا لاحتياجات التصميم، كما ينبغي أيضًا تحديد قيم الـrem بحسب نسب محددة ومناسبة لكل عنصر في صفحة الويب.

وحدة الـpx:

يمكن استخدام وحدة الـpx لتحديد حجم العناصر الثابتة مثل الصور والإطارات والشعارات.

مميزات:

• تستخدم لتحديد حجم العناصر الثابتة مثل الصور والإطارات والشعارات.
• سهلة الاستخدام والفهم.

عيوب:

• هي وحدة ثابتة وصلبة ولا تتكيف بشكل جيد مع الشاشات ذات الأحجام المختلفة.
• يمكن أن تسبب مشاكل في تنسيق التصميم عند تغيير حجم الشاشة.

وحدة الـvh والـvw:

يمكن استخدام وحدة الـvh والـvw لتحديد حجم العناصر النسبية بناءً على حجم الشاشة مثل العناصر النصية وأبعاد الحاويات والعناصر المتغيرة بناءً على حجم الشاشة.

مميزات:

• تستخدم لتحديد حجم العناصر النسبية مثل العناصر النصية وأبعاد الحاويات والعناصر المتغيرة بناءً على حجم الشاشة.
• تتكيف بشكل جيد مع الشاشات ذات الأحجام المختلفة.

عيوب:

• يمكن أن تؤدي إلى تغيير حجم العناصر بشكل كبير عند تغيير حجم الشاشة بشكل مفاجئ، مما قد يؤثر على مظهر التصميم ويجعله غير قابل للقراءة.
• قد تكون صعبة الفهم للمبتدئين في تصميم الويب.

وحدة الـrem:

يمكن استخدام وحدة الـrem لتحديد حجم العناصر النسبية مثل العناصر النصية وأبعاد الحاويات والعناصر المتغيرة بناءً على حجم الخط الأساسي للصفحة.

مميزات:

• تستخدم لتحديد حجم العناصر النسبية بناءً على حجم الخط الأساسي للصفحة.
• تتكيف بشكل جيد مع الشاشات ذات الأحجام المختلفة.
• تتيح للمستخدم تغيير حجم الخطوط في المتصفح بسهولة.

عيوب:

• قد تكون صعبة الفهم للمبتدئين في تصميم الويب.
• يمكن أن يؤثر استخدامها على أداء الموقع إذا استخدمت بشكل غير صحيح.

عادةً ما يتم استخدام مزيج من هذه الوحدات في التصميم لتحقيق التوازن بين تحديد حجم العناصر بشكل دقيق ومرونة التصميم لتتكيف مع الشاشات المختلفة.

بتاريخ 33 دقائق مضت قال عبدالباسط ابراهيم:

يعتبر استخدام ال px ليس أفضل شئ ولكن لا يمكنك استخدام ال vh و vw دائماً في جميع التنسيقات ومن مميزات استخدام vh و vw بدلا من الpx  هي:

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

بينما من عيوب استخدام vh و vw بدلا من الpx  هي:

• قد تحتاج إلى استخدام وحدات أخرى للتحكم في الحجم الأدنى أو الأقصى.
• قد تواجه مشاكل في التوافق مع بعض المتصفحات.
• قد تؤثر على قراءة المحتوى في بعض الأجهزة.

يفضل استخدام وحدات القياس rem في تصميم المواقع، يجب أن تعرف أن rem هي وحدة نسبية تعتمد على قيمة font-size للعنصر الأساسي (الجذري)، وهو عنصر الـ html1. بشكل افتراضي، تساوي قيمة font-size للعنصر الأساسي 16px1. لذلك، إذا كتبت:

p { font-size: 2rem; }

فهذا يعني أن حجم خط الفقرة سيكون ضعف حجم خط العنصر الأساسي، أي 32px1.

إذا أردت تغيير قيمة font-size للعنصر الأساسي، يمكنك كتابة:

html { font-size: 20px; }

وهذا سيؤثر على جميع العناصر التي تستخدم وحدة rem في حجم خطها1.

الفائدة من استخدام وحدات rem هي أنها تجعل الموقع متجاوب مع تغير حجم شاشة المستخدم، وتسهل التحكم في حجم خط جميع العناصر بشكل موحد

لذلك يعتبر استخدام الوحدات القياسية يختلف بحسب العناصر والتنسيقات المطبقة عليها فمثلاً ربما تحتاج لتحديد العرض لعنصر ما بنص قيمة العرض للعنصر الأب فتستخدام النسبة المئوية أفضل لذلك كل وحدة قياس مناسبة حسب التنسيقات والعناصر الموجودة ولكن من أكثر وحدات القياس التي تقوم باستخدامها هي ال rem

بتاريخ 34 دقائق مضت قال Mohammed Fahmy3:

يفضل استخدام وحدات الـ vh و vw بدلاً من الـ px في التصميم لأنها تساعد على جعل الموقع أكثر استجابة وتتكيف مع حجم الشاشة المستخدمة. 

وحدات الـ vh تقاس بالنسبة إلى ارتفاع الشاشة، بينما وحدات الـ vw تقاس بالنسبة إلى عرض الشاشة. وبذلك، يمكن استخدام هذه الوحدات لتحديد حجم العناصر في الموقع بطريقة متجاوبة لأحجام شاشات مختلفة.

بالإضافة إلى ذلك، فإن استخدام وحدات الـ vh و vw يسهل على المصمم تغيير حجم العناصر في الموقع دون الحاجة إلى تغيير قيم px يدويًا. 

ولذلك، فإن استخدام وحدات الـ vh و vw يسهل على المصمم إنشاء تصاميم متجاوبة وسهلة التكيف مع أحجام شاشات مختلفة.

ليس هناك ضرر من استخدام  vh و vw ويفضل أن تستخدمهم بدلاً من px.

بتاريخ 23 دقائق مضت قال أحمد رضا5:

لا، لا يوجد أي ضرر في استخدام وحدات الـvh والـvw بدلاً من وحدات الـpx في تصميم الويب، بالعكس، فإن استخدام هذه الوحدات يعتبر أكثر مرونة وسهولة في التعامل مع الأحجام والأبعاد المختلفة للعناصر على صفحة الويب، خاصة عند عرضها على شاشات مختلفة الحجم.

عند استخدام وحدات الـpx، يتم تحديد الحجم بشكل ثابت وصلب، مما يعني أنه قد يؤدي إلى تشويش أو تشوه العناصر عند تغيير حجم الشاشة، خاصة عند استخدام شاشات ذات دقة عالية.

أما عند استخدام وحدات الـvh والـvw، فإنها تعتمد على نسبة الحجم النسبي للعنصر إلى حجم الشاشة، وبالتالي فهي أكثر مرونة وتتكيف بشكل أفضل مع أحجام الشاشات المختلفة، مما يؤدي إلى تحسين تجربة المستخدم والوصول إلى تصميم يتناسب مع جميع الأجهزة والشاشات.

ويمكنك أيضا استخدام وحدة الـrem و تستخدم لتحديد حجم الخطوط والمسافات والأبعاد في تصميم الويب، وهي وحدة نسبية تعتمد على حجم الخط المحدد للعنصر الأساسي في صفحة الويب (عادةً الجسم body).

على سبيل المثال، إذا كان حجم الخط المحدد للجسم body هو 16 بكسل، فإن قيمة 1rem ستعادل 16 بكسل، وإذا تم تعيين حجم الخط لعنصر ما بقيمة 2rem، فسيكون حجم الخط هو 32 بكسل (2 × 16 بكسل).

استخدام وحدة الـrem يتيح للمصممين تحديد الأحجام والأبعاد بشكل نسبي، مما يساعد على تعديل تصميم الويب بشكل أسهل وأكثر مرونة، خاصة عند تغيير حجم الشاشة أو عند استخدام شاشات مختلفة الحجم. كما أن استخدامها يجعل التعامل مع العناصر المتعددة في صفحة الويب أسهل وأكثر تنظيمًا.

ومع ذلك، يجب أن يتم استخدام وحدة الـrem بحذر، حيث يمكن أن تؤثر بشكل كبير على تصميم الويب إذا تم تحديد القيم بشكل غير مناسب. لذلك، ينبغي أن يتم تحديد حجم الخط المحدد للجسم body بشكل جيد وفقًا لاحتياجات التصميم، كما ينبغي أيضًا تحديد قيم الـrem بحسب نسب محددة ومناسبة لكل عنصر في صفحة الويب.

وحدة الـpx:

يمكن استخدام وحدة الـpx لتحديد حجم العناصر الثابتة مثل الصور والإطارات والشعارات.

مميزات:

• تستخدم لتحديد حجم العناصر الثابتة مثل الصور والإطارات والشعارات.
• سهلة الاستخدام والفهم.

عيوب:

• هي وحدة ثابتة وصلبة ولا تتكيف بشكل جيد مع الشاشات ذات الأحجام المختلفة.
• يمكن أن تسبب مشاكل في تنسيق التصميم عند تغيير حجم الشاشة.

وحدة الـvh والـvw:

يمكن استخدام وحدة الـvh والـvw لتحديد حجم العناصر النسبية بناءً على حجم الشاشة مثل العناصر النصية وأبعاد الحاويات والعناصر المتغيرة بناءً على حجم الشاشة.

مميزات:

• تستخدم لتحديد حجم العناصر النسبية مثل العناصر النصية وأبعاد الحاويات والعناصر المتغيرة بناءً على حجم الشاشة.
• تتكيف بشكل جيد مع الشاشات ذات الأحجام المختلفة.

عيوب:

• يمكن أن تؤدي إلى تغيير حجم العناصر بشكل كبير عند تغيير حجم الشاشة بشكل مفاجئ، مما قد يؤثر على مظهر التصميم ويجعله غير قابل للقراءة.
• قد تكون صعبة الفهم للمبتدئين في تصميم الويب.

وحدة الـrem:

يمكن استخدام وحدة الـrem لتحديد حجم العناصر النسبية مثل العناصر النصية وأبعاد الحاويات والعناصر المتغيرة بناءً على حجم الخط الأساسي للصفحة.

مميزات:

• تستخدم لتحديد حجم العناصر النسبية بناءً على حجم الخط الأساسي للصفحة.
• تتكيف بشكل جيد مع الشاشات ذات الأحجام المختلفة.
• تتيح للمستخدم تغيير حجم الخطوط في المتصفح بسهولة.

عيوب:

• قد تكون صعبة الفهم للمبتدئين في تصميم الويب.
• يمكن أن يؤثر استخدامها على أداء الموقع إذا استخدمت بشكل غير صحيح.

 

عادةً ما يتم استخدام مزيج من هذه الوحدات في التصميم لتحقيق التوازن بين تحديد حجم العناصر بشكل دقيق ومرونة التصميم لتتكيف مع الشاشات المختلفة.

بتاريخ 34 دقائق مضت قال شرف الدين حفني:

لا يوجد مشكلة في إستخدام vh و vw  , فكرة الvh والvw هي أن يكون العرض والإرتفاع متناسب مع طول وعرض النافذة مما يساعد على جعل التصميم مُتجاوب , فإن هذا بالفعل هو إستخدامهما لذا ما تقوم به صحيح ولا يوجد فيه مشكلة

شكرا معلوماتكم جميلة

بالإضافة إلى ما تم ذكره في التعليقات السابقة، إليك بعض المعلومات الإضافية حول وحدات القياس في تصميم المواقع:

1. الـ em والذي يعتمد على قيمة font-size للعنصر الأم، ويختلف عن الـ rem في أنه يعتمد على حجم الخط الحالي للعنصر نفسه، وليس العنصر الأساسي.
2. الـ % والتي تعتمد على حجم العنصر الأم، وهي تستخدم بشكل شائع في تحديد الحجم والعرض والارتفاع والهوامش.
3. الـ pt والتي تعتمد على قياسات الطباعة وهي تستخدم بشكل شائع في تصميم المطبوعات، وليست مفيدة في تصميم المواقع.
4. الـ rem والـ em والـ % قد تؤثر على عمليات التحكم بعرض وارتفاع الصور، لذلك يفضل استخدام الـ px في هذه الحالات.
5. قد يؤدي استخدام وحدات القياس المتغيرة مثل الـ em والـ rem إلى تباين حجم النص في بعض المتصفحات، ولذلك يفضل استخدام الـ px لتحديد حجم النص إذا كان الاستقرار في الحجم مهم.
6. يفضل استخدام وحدات القياس النسبية مثل الـ rem والـ em والـ % لتحديد حجم النص والعناصر في الموقع، حيث تجعل الموقع متجاوباً مع أي حجم شاشة، وتسهل عملية التخطيط والتنسيق للعناصر، وتحافظ على نسبة ثابتة بين الارتفاع والعرض.

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

طرق لتصميم موقع متجاوب باستخدام وحدات القياس

1- استخدام وحدة الـ rem تعتبر وحدة الـ rem وحدة قياس نسبية تعتمد على حجم الخط الأساسي للصفحة، وتمكن من الحفاظ على نسبة الأبعاد والتناسب بين العناصر في جميع الشاشات، مع السماح بتغيير حجم الخط الأساسي بسهولة. يمكن استخدامها بالطريقة التالية:

body {
  font-size: 16px;
}

h1 {
  font-size: 2.5rem;
}

p {
  font-size: 1rem;
}

ومن الممكن تغيير حجم الخط الأساسي ببساطة عن طريق تعديل قيمة font-size في الـ body، مثلا:

@media (min-width: 768px) {
  body {
    font-size: 18px;
  }
}

2- استخدام الوحدات النسبية تعتمد الوحدات النسبية على حجم العنصر الأساسي الذي يتم تطبيقها عليه، وتسمح بتعيين العرض والارتفاع والهوامش والتباعدات بنسبة مئوية من حجم العنصر الأساسي، مما يتيح تعديل حجم العناصر بسهولة دون تأثير على التناسب والتوزيع في جميع الشاشات.

.container {
  width: 80%;
  margin: 0 auto;
}

.box {
  width: 50%;
  padding: 5%;
  margin: 2.5%;
  display: inline-block;
}

@media (max-width: 768px) {
  .box {
    width: 90%;
    padding: 10%;
    margin: 5%;
  }
}

3- استخدام الـ Flexbox تعتبر Flexbox أسلوبًا بديلاً عن الطرق التقليدية لتحديد موقع العناصر في الصفحة، وتتيح التحكم في ترتيب وتوزيع العناصر بطريقة مرنة وسهلة. يمكن استخدام Flexbox لتحديد توزيع العناصر على المحاور الرئيسية والثانوية، بحيث يمكن تغيير توزيع العناصر تلقائيًا بناءً على حجم الشاشة.

على سبيل المثال، يمكن استخدام Flexbox لتحقيق توزيع العناصر بطريقة مرنة في العناوين والقوائم والتصميمات الخاصة بالموقع. يمكن استخدام الخصائص التالية في CSS لتحقيق ذلك:

.container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
}

.item {
  flex: 1 0 200px;
}

في هذا المثال، يتم تعريف عنصر الـ container باستخدام display: flex، والذي يتيح لنا توزيع العناصر داخله بشكل مرن. تم تعيين خاصية flex-wrap إلى wrap للسماح بلف العناصر على أكثر من سطر، وتم تعيين خاصية justify-content إلى space-between لتوزيع العناصر بشكل متساوٍ بينها على المحور الرئيسي. تم تعيين خاصية align-items إلى center لتوسيط العناصر على المحور الثانوي.

أما بالنسبة للعناصر الفردية داخل الـ container، فقد تم تعيين خاصية flex إلى 1 0 200px، والتي تحدد قواعد توزيع العناصر وتحجمها. يتم تحديد عرض العنصر إلى 200px، ولكن يمكن أن يتم تصغيره بشكل مؤقت في حالة عدم توافر مساحة كافية، ولكن لا يمكن تكبيره بشكل دائم.

باستخدام Flexbox، يمكن تحقيق توزيع العناصر بشكل مرن وسلس، وتحسين تجربة المستخدم على المواقع المتجاوبة.

بالإضافة إلى الطرق المذكورة سابقًا، هناك بعض الطرق الأخرى التي يمكن استخدامها لتصميم موقع متجاوب ومنها:

1- استخدام الـ Grid system: يتيح الـ Grid system تحديد تركيبة الموقع وتوزيع العناصر بشكل مرتب ومتجانس في مساحة الصفحة المحددة، وهو يستخدم أساسًا الوحدات النسبية كـ % و vw/vh لتحديد حجم وموقع العناصر داخل الـ grid. يوفر الـ Grid system تحكمًا كبيرًا في توزيع العناصر وتعديلاتها حتى على الشاشات الصغيرة.

2- استخدام الـ CSS media queries: يمكن استخدام الـ media queries لتحديد تصميم مختلف للصفحة بناءً على حجم الشاشة، وتكون هذه التعديلات على أبعاد العناصر والألوان والخطوط والترتيب وغيرها من الخصائص. يمكن تعريف الـ media queries بالحجم الذي يتغير فيه تصميم الصفحة، مثل استخدامها لإظهار نافذة تحتوي على العناصر الرئيسية عند عرض الصفحة على الشاشات الصغيرة، ويمكن تحديد الخصائص الحجمية باستخدام الوحدات النسبية والـ em.

3- استخدام تقنية responsive typography: يمكن تحقيق تصميم متجاوب للخطوط باستخدام تقنية responsive typography، حيث يتم تحديد حجم الخط بناءً على حجم الشاشة والتعديل عليه ليظل النص مقروءًا وجذابًا على جميع الأجهزة. يمكن استخدام الـ em لتحديد حجم الخط بناءً على حجم النص الأساسي أو الـ vw لتحديد حجم الخط بناءً على حجم الشاشة.

4- استخدام الصور المتجاوبة: تستخدم الصور المتجاوبة (Responsive Images) لتحسين أداء الموقع وضمان تحميل الصور بسرعة وجودة عالية على جميع الأجهزة. مثال:

img {
  width: 100%;
  height: auto;
}