ما الافضل استخدام بوتستراب ام استعلامات الوسائط media queries لإنشاء تصاميم متجاوبة مع شاشات العرض؟

بتاريخ 22 دقائق مضت قال Shahad Ahmad:

ما الافضل استخدام بوتستراب ام ميديا كويري للتجاوب مع الشاشات؟

لايمكنك التخلي عن الميديا كويري حتى مع استخدام بوتستراب ستحتاج أحياناً لاستخدامها من اجل القيام بتصاميم معينة.

فينبغي تعلم كل منهما بشكل جيد واستخدامهما معاً.

أظن انه ينبغي فهم كل منهما ثم ادراك الفرق بينهما ليكون من الممكن اختيار احدهما عن الآخر.

Bootstrap عبارة عن اطار عمل (مجموعة من أدوات الويب من CSS و JS) تستعمل نظام التقطيع الشبكي grid system بجانب ملحقات جافاسكربت لإنشاء تصاميم ومكونات متجاوبة ومرنة مع كامل شاشات العرض.

استعلامات الوسائط او media queries هي قواعد CSS نستعملها لتطبيق أنماط او تنسيقات معينة بناءا على شروط معينة. من مثل: نطبق مجموعة تنسيقات في حالة ما كانت شاشة العرض أقل من 900 بكسل.

@media screen and (min-width: 900px) {
  article {
    padding: 1rem 3rem;
  }
}

تتألف استعلامات الوسائط من:

• نوع الوسائط media type من مثل: all, screen, print , speech
• ميزات الوسائط media feature وهي أشياء تميز نوع الوسائط المختار من مثل min-width 
• المعاملات المنطقية logical operator، لدمج او استهداف انواع من الوسائط. من مثل: and أو not أو only 

تستعمل بشكل فعال جدا في جعل التصاميم متجاوبة مع شاشات العرض.

متى نستخدم استعلامات الوسائط:

• تعد أخف حجما بشكل يجعل الصفحة اسرع واحسن آداء,
• أسهل من ناحية قابلية التخصيص والتحكم في العناصر.

رغم هذا سنجد أننا نكتب الكثير من القواعد كلما كبر المشروع.

متى نستخدم بوتستراب:

• عند الحاجة الى مكونات وحاويات وعناصر متجاوبة تلقائيا.
• نظام التقطيع الخاص به رائع ومرن جدا.

ملخص القول، يمكنك الاعتماد على كليهما لأن بوتستراب نفسه مكتوب على CSS وقابل للتخصيص بشكل عادي جدا.

• القاعدة ‎@media
• استعلامات الوسائط (Media Queries) في CSS
• توثيق اطار عمل Bootstrap