مولد استعلام وسائط CSS

مولد استعلام وسائط CSS

بناء CSS دقيق @media مُحددات لجميع نقاط التوقف وتقاطع الميزات دون تذكر السينتاكس. اختر مُحدد الإطار، اختر نوع الاستعلام، وقم بتفعيل الميزات الإضافية التي تحتاجها — يُجمع الأداة مُحددات صالحة مع سينتاكس كلاسيكي وحديث للنطاق.

كيفية استخدام

1. اختر مُحدد الإطار — بـ Bootstrap 5، Tailwind CSS، تصميم مادة، أو مخصص — ثم اختر عرض النقطة.
2. اختر نوع الاستعلام: عرض أدنى (مُبادر من الهاتف)، عرض أقصى (مُبادر من الحاسوب)، أو نطاق بين عرضين.
3. اختر أسلوب بناء الجملة: كلاسيكي min-width / max-width أو السينتاكس الجديد للنطاق في ميزات الوسائط المستوى 4 (width >= ...).
4. تفعيل أي ميزات إضافية تريد دمجها مع النقطة: الاتجاه، مُفضل نظام الألوان، مُفضل الحركة المُقلصة، الإمساك، أو المؤشر.
5. انسخ المُنشأ @media أضف الكود من لوحة الإخراج إلى ملفك.

خصائص

• مُعدّات الإطار – نقاط توقف بسيطة لـ Bootstrap 5، Tailwind CSS، وتصميم مادة، بالإضافة إلى وضع مخصص لأي قيمة بيتي.
• ثلاثة أنماط استعلام – إنشاء مُبادر من الهاتف min-width، مُبادر من الحاسوب max-width، أو استعلام دقيق يُوجه إلى فئة جهاز معين.
• السِّينتاكس الكلاسيكي والحديث – التبديل بين القواعد التقليدية min-width/max-width و السينتاكس النظيف للنطاق في ميزات الوسائط المستوى 4 (width >= X).
• دمج ميزات الوسائط – وضع الاتجاه، مُفضل نظام الألوان، مُفضل الحركة المُقلصة، قدرة الإمساك، ودقة المؤشر على علامة عرض.
• تحديثات حية – يتم تجديد الناتج عند تغيير المدخلات، مما يسمح لك بعرض مجموعات مختلفة فورًا.
• نسخ وتنزيل – احصل على CSS بضغط زر أو احفظه كـ .css ملف لمشروعك.