تحويل px إلى vw Pixels ↔ Viewport width مجاناً عبر الإنترنت آمن
اكتب قيمةً بـpx فتقرأها في الحال بـvw. يجري الحساب داخل متصفحك، ولا يُرسَل شيء إلى أي مكان، وما يتوقف عليه الجواب مكتوبٌ أدناه لا مفترَض.
لا رفع لأي ملف
مقاسات شائعة — تحويل px إلى vw
| px | vw |
|---|---|
| 8 | 0.555556 |
| 10 | 0.694444 |
| 12 | 0.833333 |
| 14 | 0.972222 |
| 16 | 1.111111 |
| 18 | 1.25 |
| 20 | 1.388889 |
| 24 | 1.666667 |
| 32 | 2.222222 |
| 48 | 3.333333 |
| 64 | 4.444444 |
من أين جاءت هذه الوحدات
البكسل في CSS ليس بكسل شاشتك. فلما لم تعد كثافة الشاشات أمراً يمكن توقّعه، صارت الصفحة المقيسة بالبكسلات الحقيقية صفحةً تتقلّص كلما ازدادت الشاشات دقة؛ فأُعيد تعريف بكسل CSS طولاً مرجعياً: نحو جزءٍ من ستة وتسعين من البوصة، منظوراً إليه من مسافة قراءةٍ مريحة. وكل ما عداه في هذه الصفحة مبنيٌّ عليه. والـem أقدم من الوِب — ففي الحروف الرصاصية كان عرض قالبٍ مصبوب، سُمِّي بحرف M الكبير — وهو في CSS حجم الخط النافذ، ولذلك يتغير كلما عشَّشتَ العناصر بعضها في بعض. وأُضيف الـrem للإفلات من ذلك بعينه: فهو em العنصر الجذر ولا يتراكم أبداً. وجاء الـvw مع التصميم المستجيب: جزءٌ من مئة من عرض نافذة العرض، مهما كان ذلك العرض.
أين تصادفها
هذه وحدات كل صحيفة أنماط. فالبكسلات تحدد مقاسات الحدود والظلال وكل ما لا ينبغي أن يتمدد؛ والـrem يحدد الخط والتباعد والتخطيط، فتكفي تغييرةٌ واحدة عند الجذر لإعادة مقاس واجهةٍ بأكملها؛ والـem يحدد ما ينبغي أن يتبع نصَّه، كالحشو داخل زر؛ والـvw يحدد العناوين والمقدمات التي يجب أن تملأ الشاشة على أي جهاز. والتحويل بينها هو حساب كل يوم حين يُحوَّل تصميمٌ سُلِّم بالبكسلات إلى صحيفة أنماطٍ تتمدد.
أسئلة متكررة
لماذا 16 بكسل نقطةُ البدء المعتادة؟
لأنها حجم النص الافتراضي في كل المتصفحات الكبرى، وصحيفةُ الأنماط التي لا تتجاوزه ترثه. فالـrem الواحد يساوي إذن 16 بكسل عند الإعداد الافتراضي، ومن هنا جاءت التحويلات المألوفة: 0٫5 rem هي 8 بكسل، و1٫5 rem هي 24 بكسل. فإن كبّر المستخدم القيمة الافتراضية في إعدادات متصفحه، كبرت معها القيم نفسها بالـrem — وهذا بعينه مغزى استعمالها.
أأستعمل rem أم em؟
الـrem لكل ما ينبغي أن يتبع الصفحة كلها — سُلّم الخط والتباعد وعروض التخطيط — لأنه يُقاس من الجذر ولا يتراكم قط. والـem لكل ما ينبغي أن يتبع النص الذي يقع فيه: حشو زر، والفجوة بجانب أيقونة، وإزاحة اقتباس. والخطأ الشائع تعشيشُ عناصر مقيسةٍ بالـem بعضها في بعض، فيصير 1٫2 em داخل 1٫2 em مقدارَ 1٫44، ثم 1٫73، حتى يغدو النص في أسفل الصفحة ضعفَ الحجم المقصود.
هل الجواب دقيق؟
حيث تُعرَّف الوحدتان إحداهما بالأخرى بأعداد صحيحة، نعم — وتقول الصفحة ذلك فوق الرقم، والتقريب الوحيد في عدد المنازل المعروضة. وحيث لا تكون النسبة عشرية منتهية، تعرض الصفحة اثنتي عشرة رقماً معنوياً وتقول إن العلاقة تقريبية، بدل أن تدّعي غير ذلك.
هل يغادر جهازي شيءٌ مما أكتبه؟
لا. الحساب يجري في متصفحك؛ لا يُرفَع شيء، ولا خادم أصلاً ليُرفَع إليه. حمِّل الصفحة مرة واحدة وتبقى تعمل والشبكة مطفأة.
لماذا تحوّل px إلى vw
يرسل مصمم نموذجاً أولياً مرسوماً بعرض 1440 px، فيه عنوان رئيسي بحجم 96 px وفراغ بين الأقسام 72 px. وعلى الويب الحقيقي ستُرى الصفحة بعرض 360 px على هاتف و820 px على جهاز لوحي و2560 px على شاشة كبيرة، ويود المصمم لو احتفظ العنوان بنسبته إلى الشاشة عند كل منها. والوحدة المصنوعة لذلك هي عرض نافذة العرض، vw، والطريق إليها من النموذج الأولي هو أن تحوّل px إلى vw: تأخذ قيمة البكسل وتقسمها على العرض الذي رُسم به التصميم وتضرب في مئة. فعنوان 96 px على لوحة 1440 px هو 6.67 vw، ومن ثم يكون دائماً 6.67 في المئة من الشاشة أياً كانت.
هذا هو وعد وحدة نافذة العرض، وهو أيضاً خطرها. فـrem وem تبدآن من حجم خط، يضبطه المتصفح على افتراضي معقول. أما vw فليس لها افتراضي إطلاقاً: فعرض نافذة العرض هو ببساطة مدى اتساع نافذة القارئ، ويتغير حين يدير الهاتف أو يسحب النافذة. ولذلك لا يُخفي المحوّل الرقم الوحيد الذي يعتمد عليه الجواب. فعرض التصميم يقع في حقل، يبدأ عند 1440 px، وتستطيع تغييره ليطابق نموذجك الأولي.
يجري الحساب في متصفحك ولا شيء يُرفع. وستجد أدناه الصيغة، وما يحفظه التحويل وما لا يستطيع حفظه، وأين تفيد وحدات نافذة العرض وأين تضر، ومشكلة إمكانية الوصول التي يصنعها نص vw الخالص، وتقنية clamp التي تصلحها، وطريقة لتحويل نموذج أولي بالبكسلات إلى ورقة أنماط مرنة.
الصيغة والعرض
vw تساوي px مقسومة على العرض، مضروبة في مئة
الصيغة هي vw = px ÷ العرض × 100. فبعرض تصميم 1440 px يصير المقاس 144 px إلى 10 vw، و72 px إلى 5 vw، و24 px إلى 1.667 vw. وتعرض الصفحة العرض بجانب النتيجة، كما في 144 px = 10 vw (1440 px)، لترى ما الذي افتُرض. وvw واحدة هي جزء من مئة من عرض نافذة العرض، فنافذة بعرض 1000 px فيها 1 vw تساوي 10 px.
من أين تأتي الـ1440
الـ1440 px هنا عرض كثيراً ما تُرسم به التصاميم، عادة لا معيار. فبعض الفرق ترسم بـ1280، وكثير بـ1920، وتصاميم الجوال بـ375 أو 390. ولا يوجد جواب صحيح، بل العرض الذي يستعمله ملف تصميمك فقط. اكتب عرضك أنت: فالتحويل جيد بقدر العرض الذي تعطيه.
استعمال عرض التصميم نفسه
إذا رُسم النموذج الأولي بـ1920 px فاكتب 1920، وصار عنوان 96 px نفسه 5 vw. وإذا حوّلت px إلى vw بعرض خاطئ فستبدو الصفحة صحيحة عند مقاس شاشة واحد وخاطئة عند كل الباقي، وهي علة محيرة حين لا تعرف أن تبحث عنها.
ما يحفظه التحويل وما لا يستطيعه
يحفظ حصة الشاشة
vw واحدة هي جزء من مئة من عرض نافذة العرض، فمقاس مكتوب بوحدة vw ينمو ويتقلص مع النافذة بدلاً من أن يبقى في مكانه. والنتيجة هي حصة الشاشة التي شغلتها قيمة البكسل في نموذجك الأولي، وفي المتصفح يحتفظ العنصر بتلك الحصة عند كل عرض.
لا يستطيع إعطاء افتراضي
على خلاف rem، ليس لـvw افتراضي. فالمتصفح يعطي حجم خط الجذر 16 px حين لا يقول أحد غير ذلك، فصفحة rem تستطيع أن تبدأ من رقم حقيقي؛ أما عرض نافذة العرض فهو ببساطة مدى اتساع نافذة القارئ، ويتغير حين يدير هاتفه. والعرض في الحقل هو عرض تصميمك، والجواب صحيح لشاشة بذلك العرض ومتناسب في كل مكان آخر.
التقريب
القسمة على 1440 تنتج كسوراً عشرية طويلة لمعظم المقاسات. وقيمة مثل 6.6667 vw لا بأس بها في ورقة أنماط، لكن تستطيع التقريب إلى 6.67 أو 6.7 دون أي تغيير مرئي. أبقِ خانتين أو ثلاثاً بعد الفاصلة؛ وما زاد ضجيج.
حيث تفيد وحدات نافذة العرض
العناوين الرئيسية والحرف الكبير للعرض
عنوان يجب أن يملأ حصة معينة من الشاشة على كل جهاز هو الاستعمال الكلاسيكي. وعند عرض الهاتف سيفيض عنوان ثابت من 96 px؛ أما بوحدة vw فيتقلص مع الشاشة ويبقى في سطر واحد.
الأقسام الممتدة بالكامل
كثيراً ما يبدو التباعد بين أقسام كبيرة في صفحة هبوط أفضل حين يتحجم مع الشاشة، لتحتفظ الصفحة بإيقاعها على حاسوب محمول صغير وعلى شاشة عريضة. والفراغات بوحدة vw تفعل ذلك.
أعمال فنية يجب أن تحتفظ بشكلها
الصور الرئيسية والرسوم التوضيحية والأشكال الزخرفية المحجمة بوحدة vw تحتفظ بنسبها إلى النافذة، فلا ينهار التكوين حين تتغير الشاشة.
حرف مرن بحدود
بالجمع مع clamp()، تعطي vw حرفاً ينمو بسلاسة بين حد أدنى وحد أقصى. وهذه هي التقنية التي تستعملها أوراق الأنماط الحديثة للعناوين، وهي مغطاة أدناه.
حيث تضر وحدات نافذة العرض
نص الجسم بـvw خالصة
النص المحجَّم بوحدة vw فقط لا يستجيب حين يكبّر القارئ الصفحة في المتصفح، لأن التكبير يغير حجم النافذة بالبكسلات لكن مقاس vw يحتفظ بحصته منها. والناس الذين يعتمدون على التكبير، كثيراً بسبب ضعف البصر، يبقون مع نص لا يستطيعون تكبيره. وتطلب إرشادات إمكانية الوصول أن يمكن تغيير حجم النص، ومقاس vw الخالص يفشل في هذا الاختبار.
التطرفان الصغير والضخم
عند عرض 320 px يكون عنوان من 6.67 vw بحجم 21 px، وقد يكون صغيراً جداً. وعند عرض 2560 px يكون 171 px، وهو هائل. وبلا حدود قد تكون النسبة التي بدت صحيحة عند 1440 عبثية عند الأطراف.
شريط التمرير
في متصفحات سطح المكتب، يشمل العرض المستعمل لـvw عرض شريط التمرير العمودي. فصندوق مضبوط على 100vw سيكون أعرض قليلاً من المنطقة المرئية حين تُمرَّر الصفحة، وقد يظهر شريط تمرير أفقي. اعرف هذا قبل أن تبني تخطيطاً بعرض كامل من vw.
تقنية clamp
وضع حد أدنى وسقف
تأخذ دالة CSS التي هي clamp(min, preferred, max) حداً أدنى وقيمة مفضلة وحداً أقصى. وللحرف اكتب الحد الأدنى والأقصى بوحدة rem، والقيمة المفضلة بوحدة vw زائد حد rem: font-size: clamp(2rem, 1rem + 4vw, 6rem). فينمو المقاس مع النافذة بين 32 و96 px ولا يتجاوز أياً من الطرفين. ولأن جزءاً منه بوحدة rem، فإن النص يحترم إعدادات القارئ.
كيف تبني الحد الأوسط
اختر عرضين للشاشة والمقاسين اللذين تريدهما عند كل منهما. مثلاً 32 px عند عرض 360 px و96 px عند عرض 1440 px. الميل هو (96 − 32) ÷ (1440 − 360) = 0.0593 px لكل px من العرض، وهو 5.93 vw، والجزء الثابت هو 32 − 0.0593 × 360 = 10.67 px، نحو 0.667 rem. فالحد المفضل إذن هو 0.667rem + 5.93vw. ويساعدك المحوّل في جزء vw، ودقيقة من الحساب تفعل الباقي.
لماذا هذا هو التوازن الصحيح
مع clamp تحصل على السلوك المرن الذي يريده المصممون وإمكانية الوصول التي يحتاج إليها القراء. إنه الجواب عن المشكلة الموصوفة أعلاه، وسبب استعمال معظم أوراق الأنماط الحديثة vw داخل clamp فقط.
كيف تحوّل px إلى vw هنا
اكتب قيمة البكسل
أدخل المقاس بالبكسلات في الحقل الأول. والكسور العشرية مقبولة.
اضبط عرض التصميم
اتركه عند 1440 إذا كان هذا عرض نموذجك الأولي. وغيّره إن لم يكن. وتتحدث النتيجة وأنت تكتب.
انسخ قيمة vw
استعمل الرقم في CSS بوحدته، كما في font-size: 6.67vw. وللنص ضعه داخل clamp() مع حدود بوحدة rem.
من أين تأتي هذه الوحدات
بكسل CSS
حين لم تعد للشاشات كثافة متوقعة، صارت صفحة تُقاس بالبكسلات الحقيقية صفحة تتقلص كلما صارت الشاشات أحد. فأُعيد تعريف بكسل CSS طولاً مرجعياً: نحو 1/96 من البوصة عند مسافة قراءة مريحة. وهو الوحدة التي يُرسم بها نموذجك الأولي.
وحدات نافذة العرض
جاءت vw مع التصميم المتجاوب: جزء من مئة من عرض نافذة العرض، أياً كان. وهي تقع بجانب rem، النسبية إلى حجم خط الجذر، وem، النسبية إلى العنصر. وإذا كنت تحتاج إلى مقاسات نسبية إلى النص بدل الشاشة فـحوّل px إلى rem.
أفخاخ حين تحوّل px إلى vw
استعمال عرض تصميم خاطئ
الخطأ الأكثر شيوعاً. إذا كان نموذجك الأولي بعرض 1920 وحوّلت بـ1440 فكل مقاس خاطئ بثلث. تحقق من عرض الإطار في أداة التصميم.
نسيان تصميم الجوال
لدى فرق كثيرة نموذجان، واحد لسطح المكتب وواحد للهاتف. وعنوان 96 px في الأول و40 px في الثاني ليس قيمة vw واحدة. استعمل عرضين وتحويلين وclamp للربط بينهما.
وضع الصفحة كلها بـvw
صفحة يتحجم فيها كل شيء مع النافذة تفقد حس القراءة: تطول الأسطر على الشاشات العريضة ويصغر النص على الضيقة. استعمل vw للأشياء القليلة التي ينبغي أن تتحجم، ومقاسات ثابتة أو بوحدة rem للباقي.
تجاهل مشكلة التكبير
اختبر صفحتك والمتصفح مكبَّر إلى 200 في المئة. فإذا لم ينمُ النص فالمقاسات تحتاج إلى حد rem.
أسئلة يطرحها الناس قبل التحويل
كم vw تساوي 100 px؟
بعرض تصميم 1440 px، نحو 6.94 vw.
ما أفضل عرض تصميم يُستعمل؟
العرض الذي رُسم به نموذجك الأولي. ليس هناك افتراضي شامل.
هل vw أفضل من rem؟
تؤديان مهمتين مختلفتين. rem تتبع حجم نص القارئ؛ وvw تتبع النافذة. استعمل كلاً لما تجيده.
هل أستطيع استعمال vw لحجم الخط؟
نعم، لكن ضعها داخل clamp() مع حدود بوحدة rem، ليبقى النص مقروءاً ويمكن تكبيره.
هل يُرفع رقمي؟
لا. يجري الحساب في متصفحك ولا يُرسل شيء إلى أي مكان.
كيف أعود؟
بـمن vw إلى px، الذي يضرب في العرض بدل القسمة.
الاختيار بحكمة حين تحوّل px إلى vw
قرّر ما ينبغي أن يتحجم مع الشاشة
الحرف الرئيسي والفراغات الكبيرة والأعمال الفنية: نعم. نص الجسم والحدود والأدوات الصغيرة: لا. وكلما قصرت قائمة قيم vw كانت الصفحة أمتن.
حوّل في مرحلة التصميم
إذا حوّلت px إلى vw وأنت تقرأ النموذج الأولي فتستطيع أن ترى فوراً أي القيم تخرج غريبة وتطلب من المصمم قيماً أرتب. وعنوان تبين أنه 6.6667 vw يدعو إلى حوار عن جعله 6.5 أو 7.
احتفظ بسجل للعرض
اكتب عرض التصميم في تعليق في أعلى ورقة الأنماط، ليستعمل كل من يحوّل لاحقاً العرض نفسه. والعروض المختلطة تنتج صفحة غير متسقة بطريقة لا يستطيع أحد شرحها تماماً.
من نموذج أولي إلى ورقة أنماط مرنة
اسرد المقاسات التي ينبغي أن تتحجم
افتح ملف التصميم واكتب كل مقاس تريده أن يتبع الشاشة: عنوان الصفحة الرئيسي والفراغات بين الأقسام وربما رسم توضيحي كبير. ولكل منها حوّل px إلى vw مقابل عرض الإطار، ودوّن النتيجة. وتنتهي معظم الصفحات بأقل من عشر قيم كهذه، ويبقى كل شيء آخر بوحدة rem أو بالبكسلات.
افحص إطار الجوال على حدة
إذا كان هناك نموذج للهاتف فاقرأ العناصر نفسها بعرضه. وعنوان 96 px على إطار 1440 px و40 px على إطار 375 px لا تلائمه قيمة vw واحدة، وهذه إشارة إلى استعمال clamp: يصير مقاس الهاتف الحد الأدنى، ومقاس سطح المكتب السقف، ويؤدي حد vw العمل بينهما. وحين تحوّل px إلى vw لكل إطار يحدد الرقمان الميل.
راجع عند ثلاثة عروض
انظر إلى الصفحة المنتهية عند نحو 360 و820 و1440 بكسل، ومرة عند 2560. والتخطيطات المرنة يسهل إصابتها عند عرض النموذج الأولي وتكون خاطئة بدقة في غيره، ومرور سريع على هذه العروض يجد معظم المشكلات قبل الزائر.
أبقِ الوحدة بعيدة عن النص الطويل
أسطر نص القراءة أفضل أن تُحجَّم بوحدة rem وأن يُعطى طولاً أقصى للسطر نحو 60 إلى 75 حرفاً. استعمل وحدة نافذة العرض للحرف المعروض وللتباعد، ودع نص القراءة ثابتاً.
محوّلات ذات صلة
تغطي عائلة الأدوات نفسها التحويلات المجاورة. وللعودة إلى البكسلات استعمل من vw إلى px. وللمقاسات النسبية إلى الجذر توجد من px إلى rem ومن rem إلى px، وللمقاسات النسبية إلى العنصر من px إلى em ومن em إلى px. ولألوان ورقة الأنماط نفسها تتعامل من HEX إلى RGB ومن HEX إلى HSL مع الصيغ.
مثال محلول
لنقل إن صفحة هبوط مصممة بعرض 1440 px، بعنوان رئيسي 96 px وفراغ 72 px فوقه. تكتب 96 فتقرأ 6.667 vw، وتكتب 72 فتقرأ 5 vw. وعلى نافذة 1000 px يكون العنوان 66.7 px والفراغ 50 px، متناسبين. لكن على هاتف بعرض 360 px سيكون العنوان 24 px، وهو أصغر مما تريد، فتكتب العنوان clamp(2.25rem, 1rem + 5vw, 6rem)، فيعطي حداً أدنى 36 px وسقفاً 96 px، ويبقى مقروءاً وقابلاً للتكبير. أما الفراغ، الذي لا نص فيه، فيبقى بوحدة vw عادية.
قائمة تحقق قصيرة
قبل التحويل
جد عرض النموذج الأولي. وقرر أي المقاسات ينبغي أن تتحجم وأيها لا.
أثناء التحويل
اكتب قيمة البكسل وعرض التصميم، وانسخ رقم vw بوحدته.
بعد التحويل
غيّر حجم النافذة من عرض الهاتف إلى شاشة عريضة، وكبّر الصفحة إلى 200 في المئة. وأضف حدوداً بـclamp() حيثما بدت الأطراف خاطئة.
أخطاء شائعة
افتراض أن 1440 معيار
إنها مجرد عادة. استعمل عرضك أنت.
تحجيم نص الجسم بـvw وحدها
لا يمكن تكبيره. أضف حد rem وحدوداً.
نسيان شريط التمرير
100vw أعرض من المنطقة المرئية في صفحات سطح المكتب التي تُمرَّر.
أرقامك تبقى على جهازك
يجري الحساب محلياً. يستعمل متصفحك أنت قيمك ولا يُرسل شيء إلى أي مكان. لا شيء تحذفه بعد ذلك ولا حساب تنشئه. هذه هي الطريقة البسيطة لتحويل px إلى vw.
الخلاصة
لتحويل px إلى vw هنا اكتب المقاس بالبكسلات وعرض تصميمك، واقرأ النتيجة فوراً، بالصيغة vw = px ÷ العرض × 100. يبدأ العرض عند 1440 px، عرض كثيراً ما تُرسم به التصاميم، لكنه عادة لا معيار، فاكتب عرضك أنت. ويحفظ التحويل حصة الشاشة: vw واحدة هي جزء من مئة من عرض نافذة العرض، فمقاس بوحدة vw ينمو ويتقلص مع النافذة. وعلى خلاف rem، ليس لـvw افتراضي، إذ نافذة العرض هي بقدر اتساع نافذة القارئ. وللنص اجمع vw مع rem داخل clamp()، ليبقى مقروءاً وقابلاً للتكبير. ولا شيء يُرفع.