كيف TO - نقاط توقف الجهاز النموذجية
تعرف على كيفية استخدام استعلامات الوسائط لنقاط توقف الجهاز الشائعة.
نقاط توقف الجهاز النموذجية
هناك الكثير من الشاشات والأجهزة ذات الارتفاعات والعرض المختلفة ، لذلك من الصعب إنشاء نقطة توقف دقيقة لكل جهاز. لتبسيط الأمور ، يمكنك استهداف خمس مجموعات مشتركة:
مثال
/*
Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px)
{...}
/* Small devices (portrait tablets and large phones, 600px and up)
*/
@media only screen and (min-width: 600px) {...}
/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {...}
/* Large devices (laptops/desktops, 992px and up)
*/
@media only screen and (min-width: 992px) {...}
/* Extra large devices (large
laptops and desktops,
1200px and up) */
@media only screen and (min-width: 1200px) {...}
الصفحات ذات الصلة
دروس CSS: استعلامات وسائط CSS
دروس CSS: أمثلة على استعلامات وسائط CSS
مرجع CSS: قاعدةmedia
دروس RWD: تصميم الويب سريع الاستجابة مع استعلامات الوسائط
دروس جافا سكريبت: طريقة window.matchMedia ()