مُحَوِّل وحدات CSS قم بتحويل بين px، em، rem، %، vw، vh، vmin، vmax مع إعدادات شاشة قابلة للتخصيص وحجم خط أساسي.
مُحَوِّل وحدات CSS
قم بتحويل بين px، em، rem، %، vw، vh، vmin، vmax مع إعدادات شاشة قابلة للتخصيص وحجم خط أساسي.
ضبط السياق
حدد أبعاد العرض، وحجم الخط الأساسي، وحجم العنصر الأب.
أدخل قيمة
اكتب القيمة CSS التي تريد تحويلها.
اختر الوحدات
اختر وحدات CSS المصدر والوجهة.
What Is مُحَوِّل وحدات CSS?
مُحَوِّل وحدات CSS يترجم بين الوحدات المختلفة للطول المتاحة في CSS، مع مراعاة الوحدات التابعة للسياق. الوحدات الثابتة (px) تمثل دائمًا نفس الحجم المرئي. تعتمد الوحدات النسبية على السياق: ترتبط em و rem بحجم الخط، وترتبط % بالعنصر الأب، وترتبط وحدات العرض (vw, vh, vmin, vmax) بأبعاد نافذة المتصفح. يسمح هذا المحول لك بتهيئة جميع متغيرات السياق (حجم العرض، حجم الخط الأساسي، حجم العنصر الأب) للحصول على تحويلات دقيقة بين أي وحدة CSS، مما يجعل حسابات التصميم الاستجابي سريعة ودقيقة.
Why Use مُحَوِّل وحدات CSS?
-
أبعاد عرض قابلة للتكوين لتحديد vw/vh بدقة.
-
حجم خط أساسي قابل للتعديل لتحويل em/rem.
-
حجم عنصر الأب لحساب النسب المئوية.
-
جميع الوحدات الثمانية الأساسية لطول CSS.
-
مثالي لتدفق التصميم الاستجابي.
Common Use Cases
Technical Guide
تنقسم وحدات الطول في CSS إلى فئتين:
المطلقة:
• px: بكسل CSS (1/96 من البوصة في CSS، ولكن بكسل جهاز واحد على الشاشات القياسية)
النسبية:
• em: نسبة لحجم خط العنصر. 2em = 2× حجم الخط الحالي
• rem: نسبة لحجم خط الجذر (عنصر html). أكثر قابلية للتنبؤ من em
• %: نسبة لقيمة الخاصية المقابلة لعنصر الأب
• vw: 1% من عرض العرض. 100vw = عرض كامل للعرض
• vh: 1% من ارتفاع العرض. 100vh = ارتفاع كامل للعرض
• vmin: 1% من البعد الأصغر للعرض
• vmax: 1% من البعد الأكبر للعرض
أنماط استجابة شائعة:
• طباعة سائلة: font-size: clamp(1rem, 2vw + 0.5rem, 2rem)
• أقسام ارتفاع كامل: min-height: 100vh
• مسافات استجابة: padding: 5vw
Tips & Best Practices
-
1استخدم rem لحجم الخط (الوصول إليها). استخدم px للحدود والظلال (الدقة).
-
2vmin مثالي لالحاويات المربعة الاستجابة.
-
3clamp() مع وحدات vw تمكن الطباعة السائلة بدون استفسارات الوسائط.
-
4100vh على الهاتف المحمول قد يشمل شريط العنوان - استخدم 100dvh (الارتفاع الديناميكي للعرض) بدلاً من ذلك.
-
5عند الشك، ابدأ مع rem و px. أضف vw/vh فقط عند الحاجة إلى تحجيم 相对 للعرض.
Related Tools
محول الطول
قم بتحويل بين المليمترات والسنتميترات والأمتار والكيلومترات والبوصة والقدم والياردات والأميال والعقد البحرية في لحظة.
⚖️ Unit Converters
مُحَوِّل الشَّدَّة الضوئية
تحويل بين كاندلا/م²، نيتس، لامبيرتس، ولامبيرت قدم.
⚖️ Unit Converters
مُحَوِّل وحدات الطباعة
قم بتحويل بين px، pt، em، rem، سم، مم، بوصة، وبكاس مع حجم خط أساسي قابل للتعديل.
⚖️ Unit Converters
محول التيار الكهربائي
قم بتحويل بين الأمبير، والملي أمبير، والميكروأمبير، والألف أمبير.
⚖️ Unit ConvertersFrequently Asked Questions
Q كيف أحول px إلى vw?
Q ما الفرق بين vw و %?
Q متى يجب استخدام rem مقابل em?
Q ما هو vmin?
Q لماذا تظهر شريط التمرير على الصفحات التي تحتوي على 100vh على الهاتف المحمول?
About This Tool
مُحَوِّل وحدات CSS is a free online tool by FreeToolkit.ai. All processing happens directly in your browser — your data never leaves your device. No registration or installation required.