مقدمة:

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

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

سيساعدك هذا المحول على التخلص فورًا من فن الحسابات اليدوية التي يتم إجراؤها يدويًا وسيسمح لك بالتركيز على تطوير التخطيطات المثالية من الناحية الجمالية ومتعددة الوظائف.

دراسة وحدات REM و VW.

من المناسب أكثر أن نعرف ما هي هذه الوحدات وما الفرق بينها قبل التحول إلى تصميم CSS.

ما هي حركة العين السريعة؟

العنصر الجذر (<|الإنسان|>العنصر الجذر (حركة العين السريعة) هي وحدة من وحدات CSS تعتمد على حجم خط العنصر الجذر (على سبيل المثال، في حالة كان حجم الخط الجذر هو 16 بيكسل, ، ثم:

1rem = 16 بكسل 2rem = 32 بكسل

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

ما هي شركة فولكس فاجن؟

فولكس فاجن (عرض منفذ العرض) ومع ذلك، يعتمد ذلك على حجم منفذ العرض أو نافذة المتصفح.

1vw = 1% من عرض منفذ العرض

وبالتالي، نظرًا لافتراض عرض منفذ العرض، 1440 بكسل, ، ثم:

1vw = 14.4 بكسل

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

الفارق الكبير بين REM و VW.

حجم الخط الجذري بالنسبة لعنصر الجذر الثابت، الطباعة، توحيد التباعد

فولكس فاجن عرض منفذ العرض، عرض سلس ومستجيب للشاشة، تخطيطات سلسة، وقياس مستجيب.

باختصار، بالمقارنة مع فولكس فاجن وهذا مرن،, حركة العين السريعة أكثر استقرارًا. يُشار إلى ما بين الاثنين باسم محول REM إلى VW.

صيغة تحويل REM إلى VW

يتم تحويل REM إلى VW باستخدام بيانات ارتباط وحدتين وبكسل. يمكن استخدام الصيغة التالية:

حيث قيمة VW = (قيمة REM X حجم الخط الجذري / عرض المنفذ) 100.

مثال:

فلنقل:

قيمة حركة العين السريعة = 2

حجم الخط الجذر = 16 بيكسل

عرض المنفذ = 1440 بكسل

أدخل القيم التالية في الصيغة:

فولكس فاجن = (2 × 16 ÷ 1440) × 100 فولكس فاجن = (32 ÷ 1440) × 100 فولكس فاجن = 2.22 فولت وات

عرض منفذ العرض هو 1440 بكسل هذا يعطي 2REM = 2.22 فولكس فاجن.

سيتطلب هذا من المحول الخاص بنا القيام بذلك على الفور دون الحاجة إلى الآلة الحاسبة أو مساعدة الرياضيات في CSS!

تطبيق محول REM إلى VW:

يمكن استخدام هذه الأداة بسهولة وحتى بسرعة بواسطة سميت أونلاين. اتبع الخطوات السهلة التالية:

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

أدخل مفتاح مقدار التغيير المطلوب في REM. على سبيل المثال 2 في مربع الإدخال لقيمة REM.

الخطوة 2: إدخال حجم الخط الجذري:

إنه يستخدم حجم الخط الافتراضي وهو 16 بكسل ولكن يمكنك تغيير الرقم الأساسي (على سبيل المثال 14 -18) حتى تتمكن من تحقيق أي تأثير تريده.

الخطوة 3: قم بعمل توقعات لعرض منفذ العرض:

عرض بكسل نافذة العرض الحالي (مثلاً: ١٤٤٠ بكسل، ١٠٢٤ بكسل، أو ١٩٢٠ بكسل). سيُستخدم هذا الرقم لحساب المساحة التي تشغلها كل وحدة من وحدات VW باستخدام هذه الأداة.

الخطوة 4: الحصول على نتائج فورية:

يتم أيضًا حساب قيمة VW المكافئة تلقائيًا وعرضها على المحول. سيتم عرض القيمة المُحوّلة مباشرةً من خلال المدخلات التي تُدخلها.

الخطوة 5: نسخ ولصق في CSS الخاص بك:

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

مزايا محول REM إلى VW:

1. توفير الوقت وتجنب الأخطاء:

عملية التحويل اليدوي غير دقيقة وتستغرق وقتًا طويلاً. هذا المحول يوفر عليك الوقت، ويمنحك النتائج الصحيحة فورًا، ويجنبك هدر وقت التصميم.

2. إنشاء تخطيطات مرنة حقيقية:

يمكن توسيع وحدات فولكس فاجن وتقليصها بما يتناسب مع حجم الشاشة. لذا، من السهل جدًا إضافة هذه السلاسة دون المساس بالتصاميم الموجودة بالفعل، والتي تعتمد أيضًا على REM.

3. تعزيز التصميم المستجيب:

عند كتابة REM إلى VW، فأنت متأكد من أن الطباعة والأزرار والتباعد ستكون جميلة للعرض بغض النظر عن حجم الشاشة التي تستخدمها - هاتف محمول أو شاشة عريضة للغاية.

4. مرونة عبر الأطر:

يمكن استخدام القيم الناتجة عن VW في أي بيئة بغض النظر عما إذا كنت تستخدم Tailwind أو Bootstrap أو حتى مجرد كتابة CSS خالص.

5. الشراكة الصحيحة مع المصممين والمطورين:

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

حالات الاستخدام الشائعة

يمكن أن يكون تحويل REM إلى VW مفيدًا في معظم حالات التصميم:

1. مقياس الطباعة:

 قم بضبط حجم النص (بناءً على عرض الشاشة) لجعله متساويًا.

خلفية المقياس والعناوين الرئيسية.

2. الأزرار والحاويات: 

تغيير الحشو والحواف والعرض بشكل ديناميكي.

3. شبكات السوائل:

 تطوير تخطيطات سلسة، والتي تتحرك بين نقاط التوقف.

4.تصميم الرسوم المتحركة والحركة:

 من المهم التأكد من أن مسارات الحركة والانتقالات هي نفسها على الأجهزة.

جدول تحويل REM إلى VW