مُولِد استفسارات الوسائط إنشاء استفسارات الوسائط CSS مع شروط الميزات و نقاط التوقف المسبقة.
مُولِد استفسارات الوسائط
إنشاء استفسارات الوسائط CSS مع شروط الميزات و نقاط التوقف المسبقة.
استخدم إعدادًا مسبقًا أو بناء مخصص
حدد إعدادًا شائعًا أو أضف شروط مخصصة باستخدام سمات الوسائط.
تكوين الشروط
حدد نوع الوسائط، وشروط السمات، ودمجها باستخدام مشغل AND أو OR.
نسخ الاستعلام
انسخ استعلام الوسائط المولَّد جاهزًا للاستخدام في ورقة الأنماط الخاصة بك.
What Is مُولِد استفسارات الوسائط?
مُولِد استفسارات الوسائط يساعدك على إنشاء استفسارات وسائط CSS لتصميم الاستجابة وتحديد الميزات. تعمل استفسارات الوسائط بشكل شرطي لتطبيق قواعد CSS بناءً على سمات الجهاز مثل عرض وارتفاع الإطار العرضي والتوجيه وأسلوبHEME والكثير غير ذلك. يوفر هذا الأداة استفسارات مسبقة للcases الشائعة (مobil، لوحي، سطح المكتب، وضع الظلام، الطباعة، الحركة المخفضة) ومُنشئ مخصص لإنشاء شروط معقدة. يمكنك ضبط نوع الوسائط (الشاشة، الطباعة، الكل)، إضافة متعددة من شروط الميزات، واختيار كيفية دمجها (AND أو OR). يتضمن الاستفسار الناتج بناء الجملة الصحيح مع قاعدة @media والأقواس، جاهز للصق في CSS.
Why Use مُولِد استفسارات الوسائط?
-
إعدادات مسبقة شائعة لأجهزة الجوّال، وألواح الطاولة، والكمبيوتر المكتبية، ووضع الإضاءة المنخفضة، وغيرها
-
دعم جميع سمات الوسائط في CSS بما في ذلك الحديثة منها
-
مشغلات AND/OR لدمج شروط متعددة
-
جدول مرجعي للنقاط الشائعة للاستعراض السريع
Common Use Cases
التخطيطات المرنة
أنشئ أنماطًا مقترنة بالنقاط الفاصلة لأحجام شاشات مختلفة.
دعم وضع الإضاءة المنخفضة
أولَّد استعلامات prefers-color-scheme لأنماط وضع الإضاءة المنخفضة.
ورقات الأنماط للطباعة
أنشئ استعلامات @media print لأنماط مُختزلة للطباعة.
ميزات إمكانية الوصول
استهدف تفضيلات الحركة المخففة والتناقض لتصاميم يمكن الوصول إليها.
Technical Guide
تستخدم استفسارات الوسائط CSS قاعدة @media لتطبيق الأنماط بشكل شرطي. البناء هو @media [النوع] و (الشروط) { القواعد }. تشمل أنواع الوسائط الشاشة والطباعة والكل. تختبر ميزات الوسائط قدرات الجهاز: min-width/max-width لنقاط الاستجابة، والتوجيه للتصوير الجانبي / الرأسي، و prefers-color-scheme لوضع الإضاءة / الغامق، و prefers-reduced-motion لحساسية الرسوم المتحركة، والتحويل الطائر لتقنية التحويل، والإشارة للمدخلات الدقيقة. يتم دمج الشروط المتعددة باستخدام كلمة and للجميع الشروط أو الفصل بفاصلة لاي شرط. ترفض الكلمة not استفسار الوسائط. تمكّن الميزات الحديثة مثل prefers-color-scheme و prefers-reduced-motion من تحسين تقدمي للمفضلات المستخدم. لمقاربة الهاتف المحمول أولاً، استخدم استفسارات min-width. لأولوية سطح المكتب، استخدم استفسارات max-width. يخلق الجمع بينهما استفسارات النطاق مثل @media (min-width: 768px) و (max-width: 1023px).
Tips & Best Practices
-
1استخدم نهج الجوال أولًا مع استعلامات min-width للحصول على أداء أفضل
-
2شمل دائمًا prefers-reduced-motion من أجل إمكانية الوصول
-
3اختبر prefers-color-scheme لدعم وضع الإضاءة المنخفضة التلقائي
-
4استخدم استعلامات النطاق (الحد الأدنى والحد الأقصى) لاستهداف فئات أجهزة محددة
Related Tools
مسرح تجريبي ل CSS Flexbox
مستكشف CSS Flexbox المرئي مع عناصر تحكم تفاعلية لجميع خصائص حاوية المرونة.
🎨 CSS & Design
ملعب CSS Grid
بناء CSS Grid بصروري مع عناصر تحكم تفاعلية لأعمدة القالب والصفوف والفراغات.
🎨 CSS & Design
مُختبر التصميم المرن
معاينة المواقع الإلكترونية في نقاط انقطاع الأجهزة الشائعة باستخدام عارض إطار متضمّن.
🎨 CSS & Design
مُنشئ أنماط الطباعة
إنشاء أنماط طباعة @media مع خيارات لإخفاء العناصر وتحسين النص والتحكم في فترات الصفحة.
🎨 CSS & DesignFrequently Asked Questions
Q هل يجب أن أستخدم min-width أو max-width؟
Q ما النقاط الفاصلة التي يجب أن أستخدمها؟
Q هل يمكنني دمج شروط متعددة؟
Q ما هو prefers-color-scheme؟
Q كيف يمكنني دعم الحركة المخففة؟
About This Tool
مُولِد استفسارات الوسائط 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.