الرم
وحدة قياس Webflow الافتراضية هي البكسل px. إذا قمنا بكتابة "10" في Designer وضغطنا على "Enter" ، فسيتم تعيين "10px".
يستخدم Client-First الرم ، والذي يمكننا تحديده في القائمة المنسدلة للوحدات.
ما هو الرم rem؟
Rem اختصار ل "root em".
- Rem هي وحدة قياس نسبية تعتمد على جذر العنصر font-size.
- عنصر الجذر هو html .
- حجم الرم rem نسبي إلى حجم خط html.
- معظم الأحجام المطبقة في Client-First تستخدم الرم rem.
وراثة حجم خط المتصفح
في Client-First ، نرث html font-size من المتصفح.
تستخدم المتصفحات مبدئيًا 16 بكسل كحجم خط html الافتراضي.
1rem = 16px هو تحويل المتصفح الافتراضي.
استنادًا إلى الأحجام المعتمدة من Client-First ، يمكننا إجراء تحويلات px الى rem بشكل سريع. على سبيل المثال ، قيم rem المعتمدة من Client-First هي 0.5 ، 1 ، 1.5 ، 2 ، 2.5 ، 3 ، وهكذا.
Rem و Client-First هما زوجان قويان لمتابعة أفضل ممارسات الوصول مع حجم خط المتصفح.
الحسابات
كل 16px بكسل هي 1 rem رم عندما يتم تعيين حجم الخط في المتصفح على "افتراضي" في إعدادات المتصفح.
عندما نبني مشروع Webflow الخاص بنا ، فإننا نستخدم دائمًا 16px بكسل كقيمة أساسية لحساب rem.
كل تحويل قياس رم rem هو مضاعف 16.
لتحويل قيمة px إلى rem ، قسّم هذه القيمة على 16.
64px / 16px = 4rem
لتحويل قيمة rem إلى px اضرب هذه القيمة في 16.
2rem x 16px = 32px
للاستخدام الأسهل، نقترح استخدام قيم rem سهلة القراءة مثل 1 ، 2 ، 2.5 ، 3 ، 4 ، 5.
نريد تجنب الاستخدام المتكرر لقيم الأرقام الطويلة مثل 8.4375 rem يصعب تذكر هذه القيم وستؤدي إلى إبطاء سير العمل لدينا.
الحسابات في Webflow Designer
نستطيع حساب معظم الوحدات داخل Webflow Designer ، يمكننا حساب rem بشكل تلقائي في Webflow.
داخل إدخال العرض width input لبرنامج Designer ، اكتب "100 / 16rem" ، واضغط على "Enter" ، وشاهد Webflow يقوم بعملية حساب rem.
يمكننا قسمة أي رقم على 16 للحصول على قيمة rem داخل Webflow Designer.
فوائد في إمكانية الوصول
إعدادات حجم خط المتصفح
تستخدم المتصفحات حجم خط html الافتراضي 16 بكسل - وتسمح المتصفحات للمستخدم بتحديث حجم الخط الافتراضي. يمكن للمستخدمين تحديث تفضيلاتهم وتغيير إعدادات حجم الخط.
تعد إعدادات حجم خط المتصفح أحد الموضوعات الأساسية المتعلقة بإمكانية الوصول. عندما يقوم المستخدمون بتحديث خط المتصفح الخاص بهم ، يجب أن يتكيف محتوى موقع الويب مع التغيير. يتكيف نظام الرم rem في Client-First مع إعدادات حجم خط متصفح المستخدم.
عندما نعمل في قياسات وحدة أخرى ، مثل px و vw ، فإننا نتجاهل تفضيلات المستخدم لتحديث إعدادات حجم خط المتصفح
تكبير المتصفح
كما يحترم rem ضوابط تكبير متصفح المستخدم. عندما يقوم المستخدم بتكبير الصفحة أو تصغيرها ، فسيتم تكبير تصميم الصفحة ومحتوياتنا مع المستخدم.
عندما نستخدم وحدات vw أو vh ، لن يعمل تكبير المتصفح.
يعتمد vw على عرض إطار عرض المتصفح (أو الارتفاع في حالة vh). فقط التغيير في نافذة المتصفح سيؤثر على الأحجام في تلك الوحدات.
Client-First يتبع أفضل ممارسات الوصول. يرتبط قرار العمل بالرم ارتباطًا مباشرًا بمزايا إمكانية الوصول وتجربة المستخدم.
تعرف على المزيد حول إمكانية الوصول باستخدام rem في مقالة مقارنة Wizardry مقابل Client-First. هذه نظرة عامة فنية على فوائد الريم كوحدة قياس يمكن الوصول إليها.
قيم البكسل px الى الرم rem الموصى بها
فيما يلي قائمة بجميع قيم rem الموصى بها مع قياسها المحول بالبكسل.
تعتبر قيم Client-First المعتمدة هذه توصية وليست مطلبًا صارمًا.
قائمة الأحجام هذه تفاعلية. قم بتحديث القيم ادناه.
يقترح Client-First العمل بهذه القيم.
هناك 3 استثناءات لاستخدام القيم أعلاه.
1. الطباعة
يعد استخدام 14px بكسل لحجم الخط أمرًا شائعًا ويوصى به عندما تكون 16px بكسل كبيرة جدًا. غالبًا ما يكون حجم الخط 12px بكسل صغيرًا جدًا للطباعة.
14px = 0.875rem
2. تباعد 2px
استخدم 2 بكسل للتباعد الضئيل. إذا كانت هناك حاجة إلى قيمة تباعد أقل من 4 بكسل ، فاستخدم 2 بكسل.
2px = 0.125rem
3. بكسل واحد هو بكسل واحد
عند استخدام 1 بكسل ، على سبيل المثال ك CSS border، استخدم 1px بكسل كقيمة.
لا نوصي بتحويل قيم 1px إلى rem.
أجهزة الرتينا "Retina" لها قواعد تحجيم مختلفة عن الأجهزة الأخرى. سيؤدي استخدام 1 بكسل إلى إنشاء خط بحجم 1 بكسل بالضبط على أي جهاز دون تعارض.
1px = 1px
أداة تحويل ملحق Finsweet من البكسل px الى الرم rem.
يوفر Finsweet Extension أداة لتحويل المشاريع التي تم إنشاؤها في px إلى rem.
سيحول كل قيمة في المشروع من px إلى قيمته rem المحسوبة.
داخل صفحة Client-First في Finsweet Extension ، ستدير أداة "PX to REM Migrator" تحويل وحدات الحجم.