كيفية إنشاء: نقاط انقسام الأجهزة النموذجية

تعلم كيفية استخدام الاستعلامات الإعلامية للنقاط الانقسام النموذجية الشائعة.

نقاط انقسام الأجهزة النموذجية

هناك العديد من الشاشات والأجهزة المختلفة في العلو والعرض، لذا من الصعب إنشاء نقاط انقسام دقيقة لكل جهاز.

لإجراء العمليات بسهولة، يمكنك تحديد خمس مجموعات شائعة:

مثال

/* أجهزة صغيرة جدًا (الهواتف الذكية، 600px وما دون) */
@media only screen and (max-width: 600px) {...}
/* أجهزة صغيرة (حواسيب لوحية أفقية والهواتف الذكية الكبيرة، 600px وما فوق) */
@media only screen and (min-width: 600px) {...}
/* أجهزة متوسطة (حواسيب لوحية رأسية، 768px وما فوق) */
@media only screen and (min-width: 768px) {...}
/* أجهزة كبيرة (حواسيب محمولة ولوحات مقاس كبيرة، 992px وما فوق) */
@media only screen and (min-width: 992px) {...}
/* أجهزة كبيرة جدًا (حواسيب محمولة ولوحات مقاس كبيرة، 1200px وما فوق) */
@media only screen and (min-width: 1200px) {...}

تجربة بنفسك

الصفحات ذات الصلة

دليل التعليمات:استعلامات CSS

دليل التعليمات:مثال على الاستعلامات الإعلامية CSS

دليل المراجعة:قاعدة @media CSS

دليل التعليمات:تحقيق تصميم الويب الم��ر عبر الاستعلامات الإعلامية

دليل المراجعة:طريقة JavaScript window.matchMedia()