تحويل vw إلى px Viewport width ↔ Pixels مجاناً عبر الإنترنت آمن

لماذا تحوّل vw إلى px

تقول ورقة الأنماط font-size: 5.2vw على عنوان رئيسي، وmargin-top: 8vw على قسم، وwidth: 42vw على صورة. هذه قيم مرنة، ولا تخبرك بما هو على الشاشة. ما حجم العنوان على هاتف؟ وما عرض الصورة على حاسوب محمول؟ وهل يبدو الهامش مناسباً عند 1920 بكسل؟ ولتعرف ذلك تحوّل vw إلى px: تضرب الرقم في عرض النافذة وتقسم على مئة، وتقرأ الجواب بالوحدة التي يستخدمها المصممون والمختبرون والعملاء. وهذا ما تفعله حين تراجع شيفرة مرنة، أو تقارن بناءً بنموذج التصميم، أو تشرح لزميل لماذا يبدو العنوان صغيراً على شاشة ضيقة.

ما يجعل هذا التحويل مختلفاً عن rem أو em أن المضروب هو النافذة نفسها. فكل vw هو جزء من مئة من عرض إطار العرض، ولذلك فإن 5.2vw تساوي 52 px في نافذة عرضها 1000 px، و18.7 px في هاتف عرضه 360 px، و99.8 px على شاشة عريضة بعرض 1920. وليس هناك قيمة افتراضية يُرجع إليها، والعرض يتغير حين يدير القارئ الهاتف أو يسحب النافذة. ولذلك يطلب المحوّل العرض ويعرضه بجانب الجواب ويبدأ من 1440 px، وهو عرض كثيراً ما تُرسم عليه التصاميم.

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

الصيغة والعرض

px تساوي vw مضروبة في العرض، مقسومة على مئة

الصيغة هي px = vw × العرض ÷ 100. عند عرض 1440 px تصبح 10 vw هي 144 px، و5 vw هي 72 px، و1.667 vw هي 24 px. وتطبع الصفحة العرض بجانب النتيجة، ولذلك فسطر مثل 10 vw = 144 px (1440 px) يخبرك بما افتُرض. ولترى شاشة أخرى غيّر العرض واقرأ النتيجة من جديد.

أي عروض تجرب

مجموعة مفيدة للفحص هي 360 أو 390 للهواتف، و768 للوح في الوضع الرأسي، و1024 لحاسوب محمول صغير، و1440 لحاسوب محمول أو مكتبي نموذجي، و1920 لشاشة Full HD. اكتب كلاً منها في حقل العرض ودوّن النتيجة. وخمس قراءات تريك المدى الكامل لقيمة ما، وأي قفزة متطرفة تبرز.

استخدام عرض النافذة الفعلية

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

ما يحفظه التحويل وما لا يستطيع

يحفظ الحصة من الشاشة

كل vw هو جزء من مئة من عرض إطار العرض، ولذلك فالحجم المكتوب بـ vw ينمو ويتقلص مع النافذة بدل أن يبقى ثابتاً. وقيمة البكسل التي تحصل عليها هي تلك الحصة مجسَّدة لعرض معين.

لا يستطيع إعطاء قيمة افتراضية

بخلاف rem، ليس لـ vw قيمة افتراضية. يعطي المتصفح حجم خط الجذر 16 px حين لا يقول أحد غير ذلك، ولذلك تستطيع صفحة rem أن تبدأ من رقم حقيقي؛ أما عرض إطار العرض فهو ببساطة عرض نافذة القارئ كيفما كان، ويتغير حين يدير الهاتف. والـ 1440 px هنا عرض كثيراً ما تُرسم عليه التصاميم، عادة لا معيار. فاكتب عرضك أنت.

التقريب

قد ينتج الضرب في العرض والقسمة على 100 كسوراً عشرية. 6.67 vw عند 1440 px تساوي 96.048 px. وتتعامل المتصفحات مع البكسلات الكسرية، لكن إن احتجت عدداً صحيحاً لملف تصميم فقرّب ودوّن أن التقريب منك.

قراءة ورقة أنماط مرنة

خذ ثلاثة عروض ودوّن النتائج

اختر عرضاً ضيقاً وآخر متوسطاً وآخر واسعاً، مثلاً 375 و1024 و1920. ولكل قيمة vw مهمة في ورقة الأنماط، حوّل vw إلى px عند كل عرض ودوّن الأرقام الثلاثة في ملاحظة. فعنوان بـ 5.2 vw يعطي 19.5 و53.2 و99.8 بكسل. وبهذه الطريقة تعرف هل العنوان مقروء عند الطرف الضيق وغير طاغٍ عند الطرف الواسع.

ابحث عن clamp

تضع الشيفرة المرنة الجيدة حدوداً حول vw بـ clamp(min, preferred, max). فإن رأيت clamp(2rem, 1rem + 4vw, 6rem) فإن الحجم ينمو بين 32 و96 px ويثبت عند الطرفين. وحين تحوّل جزء vw تذكر أنه وسط المدى فقط، وأن الحدود هي التي تقرر ما يحدث عند الأطراف.

افحص الأطراف

العروض الخطرة هي الأصغر والأكبر. عند 320 px عنوان بـ 6 vw يساوي 19 px؛ وعند 2560 يساوي 154 px. فإن لم يبد أي منهما مقبولاً ولم يكن هناك clamp، فالورقة تحتاج إلى حدود.

فخاخ عند تحويل vw إلى px

شريط التمرير

في متصفحات سطح المكتب يشمل عرض إطار العرض المستخدم لـ vw عرض شريط التمرير العمودي. فـ 100vw أعرض قليلاً من المنطقة المرئية حين تُمرَّر الصفحة، بنحو 15 إلى 17 بكسل على أنظمة كثيرة. وقيمة البكسل التي تحسبها إذن أكبر قليلاً من العرض المرئي الذي يبدو أنها تمثله. وعلى الهواتف، حيث تتراكب أشرطة التمرير فوق الصفحة، ينعدم الأثر.

استخدام العرض الخطأ

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

الخلط بين vw والنسبة المئوية

عرض 50% يشير إلى عرض العنصر الأب، بينما 50vw تشير إلى النافذة. وداخل حاوية ضيقة يختلف الاثنان كثيراً. ويعطي المحوّل جواب vw؛ وإن كان عنصرك داخل حاوية فقد يكون الأب أضيق من النافذة.

نسيان أن النص بـ vw لا يمكن تكبيره

النص المحدد الحجم بـ vw وحدها لا يستجيب حين يكبّر القارئ الصفحة، لأن النافذة والنص يتدرجان معاً. وتطلب إرشادات إمكانية الوصول أن يمكن تغيير حجم النص. أضف حداً بـ rem، كما في clamp()، لكي يستجيب النص للتكبير أيضاً.

أسئلة يطرحها الناس قبل التحويل

كم بكسلاً يساوي 1 vw؟

جزء من مئة من عرض النافذة: 14.4 px عند 1440، و10 px عند 1000، و3.6 px عند 360.

كم بكسلاً تساوي 50 vw؟

نصف النافذة: 720 px عند عرض 1440، و500 px عند عرض 1000.

لماذا صفحتي أعرض من الشاشة؟

صندوق بـ 100vw في صفحة تُمرَّر أعرض من المنطقة المرئية لأن شريط التمرير محسوب. استخدم 100% داخل حاوية بدلاً من ذلك.

هل vw هي نفسها النسبة المئوية؟

لا. النسبة المئوية تشير إلى الأب، وvw إلى النافذة.

هل يُرفع رقمي؟

لا. يجري الحساب في متصفحك ولا يُرسل شيء إلى أي مكان.

كيف أعود؟

بـ من px إلى vw، التي تقسم على العرض بدل أن تضرب.

قيم شائعة عند عروض شائعة

جدول ذهني

من المفيد معرفة بضع نقاط ارتكاز لتقدّر قبل أن تستخدم المحوّل. عند عرض 1000 px تكون 1 vw هي 10 px، مما يجعل الحساب تافهاً: 2.5 vw هي 25 px، و8 vw هي 80 px. وعند 1440 px تكون 1 vw هي 14.4 px. وعند 375 px تكون 1 vw هي 3.75 px، ولذلك فعنوان بـ 8 vw هو 30 px. وحين تحوّل vw إلى px لفحص سريع فابدأ من إحدى نقاط الارتكاز هذه وقِس عليها.

ثلاثة عروض، وورقة أنماط واحدة

خذ بطاقة بعرض 80vw وفجوة بـ 4vw وعنوان بـ 6vw. على هاتف 375 px تساوي 300 px و15 px و22.5 px. وعلى لوح 768 px تساوي 614 px و30.7 px و46 px. وعلى حاسوب مكتبي 1440 px تساوي 1152 px و57.6 px و86.4 px. ومشاهدة الثلاثة جنباً إلى جنب تخبرك فوراً أن البطاقة عريضة جداً على الحاسوب المكتبي وأن العنوان كبير جداً، وأنك تريد على الأرجح عرضاً أقصى وclamp.

ما وراء إطار العرض

وحدات الحاوية

تقدم CSS الأحدث وحدات نسبية إلى حاوية بدلاً من النافذة، مثل cqw، وهي جزء من مئة من عرض الحاوية. وهي تحل مشكلة أن مكوناً موضوعاً في شريط جانبي ضيق يتصرف كأن له النافذة كلها. وإن استخدمتها فالحساب هو نفسه كما في vw، مع عرض الحاوية أساساً، ويمكنك استخدام هذا المحوّل بكتابة ذلك العرض.

إطارات العرض الصغيرة والكبيرة والديناميكية

على الهواتف تتغير المنطقة المرئية حين ينزلق شريط العنوان بعيداً. وللارتفاعات تصف الوحدات الأحدث svh وlvh وdvh إطار العرض الصغير والكبير والديناميكي. أما للعروض فالوضع أبسط، لأن شريط العنوان لا يؤثر فيها، وvw مستقرة. وهذا سبب آخر لكون vw وحدة أأمن من vh للتصميم المرن على الجوال.

النسبة المئوية وvw والشبكة

تتبع العروض بالنسبة المئوية الأب، وتتبع vw النافذة، وتتبع شبكة CSS وflexbox المساحة المتاحة. وكثيراً ما تستخدم أفضل التخطيطات المرنة الشبكة والنسب المئوية للبنية وvw للنص والمسافات فقط، لأن هذه هي الأشياء التي تستفيد من تتبع الشاشة مباشرة. وحين تحوّل vw إلى px لفحص تخطيط، اسأل هل كان مسار في الشبكة سيقول الشيء نفسه بمتانة أكبر.

شرح vw لمن لا يكتبون CSS

استخدم النافذة مسطرة

يفهم العملاء والزملاء الفكرة عادة حين تقول إن vw هي واحد في المئة من عرض الشاشة. فعنوان بـ 5 vw عرضه خمسة في المئة من الشاشة. ثم أرِهم رقمين: ما يساويه على هاتفهم الخاص وعلى الشاشة الكبيرة في غرفة الاجتماعات. وحين تحوّل vw إلى px للعرضين وتقول النتائج بصوت عالٍ، تصبح فكرة حجم يتحرك مع الشاشة ملموسة.

قل لماذا التصميم غير ثابت

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

من أين تأتي هذه الوحدات

بكسل CSS

حين توقفت الشاشات عن امتلاك كثافة يمكن التنبؤ بها، صارت صفحة مقيسة بالبكسلات الحقيقية صفحة تتقلص كلما ازدادت الشاشات حدة. فأُعيد تعريف بكسل CSS كطول مرجعي: نحو 1/96 من البوصة على مسافة قراءة مريحة. وهو الوحدة التي تعطي هذه الصفحة أجوبتها بها.

وحدات إطار العرض

جاءت vw مع التصميم المتجاوب: جزء من مئة من عرض إطار العرض، أياً كان. وتقف بجانب rem، النسبية إلى حجم خط الجذر، وem، النسبية إلى العنصر. ولترى كيف تبدو قيمة البكسل نفسها في تلك الوحدات، حوّل rem إلى px وقارن.

عادات تبقي الشيفرة المرنة مفهومة

علّق على قيم البكسل

سطر مثل font-size: clamp(2rem, 1rem + 4vw, 6rem); /* 32px at 360, 96px at 1440 */ يكلف بضع كلمات ويوفر على القارئ التالي عدة تحويلات.

احتفظ بعرض التصميم في مكان واحد

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

استخدم vw باعتدال

قائمة قصيرة من قيم vw سهلة التفكير فيها. أما ورقة أنماط كل شيء فيها بـ vw فليست كذلك. احتفظ بها لنص العرض والفجوات الكبيرة والأعمال الفنية.

اختبر بأجهزة حقيقية حين يهم الأمر

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

محولات ذات صلة

تغطي عائلة الأدوات نفسها التحويلات المجاورة. وللعودة إلى vw استخدم من px إلى vw. وللأحجام النسبية إلى الجذر هناك من px إلى rem ومن rem إلى px، وللأحجام النسبية إلى العنصر من px إلى em ومن em إلى px. ولألوان ورقة الأنماط نفسها تتولى من HEX إلى RGB ومن RGB إلى HEX الترميزات.

مثال محلول

لنفترض أن مختبراً أبلغ أن عنوان الواجهة صعب القراءة على هاتف صغير. تقول ورقة الأنماط font-size: 5.2vw دون حدود. تحوّل vw إلى px عند 360 وتقرأ 18.7 px، وعند 768 تقرأ 39.9 px، وعند 1440 تقرأ 74.9 px. وعند الطرف الضيق يكون العنوان أكبر قليلاً من نص المتن ولم يعد يُقرأ كعنوان. فتقترح clamp(2rem, 1rem + 4vw, 5rem)، الذي يعطي 32 px عند الأضيق، ونحو 51 px عند 768، و5rem، أي 80 px، عند الأوسع. ويؤكد المختبر أنه يُقرأ الآن جيداً، وما زال العنوان يتدرج.

قائمة مراجعة قصيرة

قبل التحويل

اختر العروض التي تهمك، من أدوات المطور أو من قائمة أجهزتك المستهدفة.

أثناء التحويل

اكتب قيمة vw وكل عرض بالتتابع، ودوّن البكسلات المعروضة بجانب الأساس.

بعد التحويل

انظر إلى الأطراف. فإن كان حجم صغيراً جداً أو كبيراً جداً عند أي طرف، فأضف حدوداً بـ clamp().

أخطاء شائعة

افتراض جواب واحد

لقيمة vw حجم بكسل مختلف عند كل عرض. اذكر العرض مع كل رقم.

نسيان شريط التمرير

100vw تشمله، ولذلك قد يفيض صندوق بعرض كامل.

تحديد حجم نص المتن بـ vw وحدها

لا يمكن تكبيره. أضف حداً بـ rem وحدوداً.

أرقامك تبقى على جهازك

يجري الحساب محلياً. وتستخدم قيمك متصفحك أنت ولا يُرسل شيء إلى أي مكان. ولا شيء لتحذفه بعد ذلك ولا حساب لتنشئه. تلك هي الطريقة البسيطة لتحويل vw إلى px.

الخلاصة

لتحويل vw إلى px هنا، اكتب الحجم بـ vw وعرض النافذة، واقرأ النتيجة بالبكسل فوراً، باستخدام الصيغة px = vw × العرض ÷ 100. يبدأ العرض من 1440 px، وهو عرض كثيراً ما تُرسم عليه التصاميم، لكنه عادة لا معيار، فاكتب عرضك أنت. ويحفظ التحويل الحصة من الشاشة: كل vw جزء من مئة من عرض إطار العرض، ولذلك فالحجم بـ vw ينمو ويتقلص مع النافذة. وبخلاف rem، ليس لـ vw قيمة افتراضية، لأن إطار العرض هو عرض نافذة القارئ كيفما كان. وللنص اجمع vw مع rem داخل clamp()، لكي يبقى مقروءاً وقابلاً للتكبير. ولا يُرفع شيء.