مولد استعلامات الوسائط
إنشاء استعلامات CSS الوسائط للتصميم المتجاوب.
إعدادات استعلام الوسائط
تكوين شروط استعلام الوسائط
الشرط 1
القوالب المحددة مسبقاً
اختر أنماط استعلامات الوسائط الشائعة
كود CSS المُنشأ
@media screen and (max-width: 768px) {
/* Your CSS rules here */
}نقاط التوقف الشائعة
الجوال:
max-width: 480pxالجهاز اللوحي:
481px - 768pxسطح المكتب:
min-width: 1024pxسطح مكتب كبير:
min-width: 1200pxدليل استعلامات الوسائط
خصائص الوسائط الرئيسية
- • width/height: عرض/ارتفاع منطقة العرض
- • min-width/max-width: شروط العرض الأدنى/الأقصى
- • orientation: اتجاه الشاشة (عمودي/أفقي)
- • resolution: دقة الشاشة (شاشات الريتينا، إلخ)
- • hover: دعم قدرة التحويم
- • pointer: دقة المؤشر (لمس/ماوس)
نصائح الاستخدام
- • نهج الجوال أولاً: استخدم min-width للتصميم من الشاشات الصغيرة
- • ادمج الشروط المعقدة مع المشغلات المنطقية
- • استخدم نوع وسائط الطباعة لأنماط طباعة منفصلة
- • استخدم الدقة لدعم الشاشات عالية الدقة