محول البوصة إلى ارتفاع VH – تحويل البوصات إلى ارتفاع Viewport في لمح البصر.

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

إنها أداة مثالية لمصممي الويب ومطوري الواجهة الأمامية وأولئك الذين يعملون في مجال UI/UX والذين يرغبون في التأكد من أن تخطيطاتها متعددة الاستخدامات وجذابة بنفس القدر عبر الأجهزة والدقة المختلفة.

ما هو البوصة (IN)؟

البوصة (بوصة) وحدة قياس غير خطية لتصميم الطباعة، وأحجام المنتجات، وحجم القياس الفيزيائي. البوصة الواحدة تساوي ٢٫٥٤ سنتيمترًا.

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

ما هو VH (ارتفاع منفذ العرض)؟

وحدة CSS هي VH (ارتفاع المنفذ) أي 1/100 من ارتفاع الجزء المرئي من نافذة المتصفح.

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

1vh = 1 بالمائة من ارتفاع نافذة المتصفح.

100vh = ارتفاع المتصفح بالكامل.

هذا يعني أن وحدات VH ستضيف أو تزيل عناصر تصميمها تلقائيًا مع ازدياد ارتفاع المتصفح أو انكماشه. يُعد هذا مفيدًا جدًا عند إنشاء:

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

لماذا تحويل البوصات إلى VH؟

ترجمة الأرقام إلى VH تسد الفجوة بين النسخة الحقيقية والنسخة الرقمية.

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

يعد هذا تحسنًا عند تطبيق VH على النقيض من البوصات الثابتة:

• التخطيطات: يتم تغيير حجم التخطيطات إلى أي ارتفاع للشاشة.
• تناسق: بين القرارات هناك نسب نسبية للعناصر.
• تجربة المستخدم: يتم عرض واجهة الموقع بنسبة مناسبة للزائر بغض النظر عن الجهاز الذي يستخدمه.

صيغة تحويل البوصة إلى VH.

تُحدَّد معادلة التحويل بين البوصات وارتفاع نافذة العرض بكثافة البكسلات وعددها في البوصة الواحدة من الشاشة. ومع ذلك، من بين التقديرات العامة المُطبَّقة في مجال التصميم المتجاوب، هناك تقدير واحد:

1 بوصة = 15.82 VH

صيغة التحويل:

VH = بوصة × 15.82

مثال: تحويل 3 بوصات إلى VH

إحدى الطرق هي أنك قد ترغب في تصميم قسم ويب في برنامج التصميم الخاص بك وقد ترغب في جعل الارتفاع بوحدات VH في CSS مستجيب.

باستخدام الصيغة:

VH = 3 × 15.82 = 47.46 VH

سيكون ارتفاعه حوالي 47.46vh مع قسم 3 بوصة.

في CSS، سيبدو الأمر كما يلي:

.القسم {الارتفاع: 47.46 قدمًا؛ }

يؤدي هذا إلى تغيير مقياس ارتفاع القسم الخاص بك إلى أي منفذ عرض للجهاز.

استخدام محول البوصة إلى VH.

يعد تحويل بوصة إلى VH أمرًا سهلاً للتشغيل على ToolsMate ولا يحتاج إلا إلى تنفيذه في ثوانٍ معدودة:

الخطوة 1: أدخل قيمتك

في مربع الإدخال الأول، أدخل الطول (القيمة بالبوصة IN).

الخطوة 2: التحويل التلقائي

بمجرد كتابة جميع الأرقام في المربع الأول، سيتم حساب القيمة في VH تلقائيًا وعرضها في المربع الثاني ولن تكون هناك حاجة لإجراء أي حساب.

الخطوة 3: التحويل العكسي:

هذه خطوة اختيارية للتحويل إلى صيغة عادية. يمكنك أيضًا كتابة VH وتحويله إلى بوصة.

الخطوة 4: النسخ والتطبيق

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

جدول تحويل البوصة إلى VH

يمكن تحويل التحويل من بوصة إلى VH إلى VH بسرعة كما هو موضح أدناه (القيم التقريبية):