كيفية جعل الموقع يتناسب مع مقاسات الشاشات المختلفة

يمكنك تنفيذ ذلك عبر إستخدام ميديا كويري media query وهي عبارة عن تنسيقات بالcss يتم تنفيذها عندما يكون للشاشة مقاسًا معينًا , على سبيل المثال 

/* For desktop: */
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}

@media only screen and (max-width: 768px) {
  /* For mobile phones: */
  [class*="col-"] {
    width: 100%;
  }
}

تقوم الشفرة بالأعلى بتقسيم الشاشة إلى 12 عمود, لذا يمكن وجود عنصرين من الصنف col-6 في نفس المستوي الأفقي, أو ثلاث عناصر من الصنف col-4 , بينما عندما تصل الشاشة إلى العرض 768 يُصبح كل عنصر في سطر وحده حتى تتناسب مع الشاشات الصغيرة

يعرف هذا بتصميم الويب التجاوبي او المتجاوب Responsive web design، ويكون ذلك باستعمال ما يعرف باستعلامات الوسائط Media Queries وهي قواعد CSS تسمح بتطبيق تنسيقات CSS بناء على:

• نوع جهاز العرض. مثل: طابعة print، شاشات الحاسوب screen، جهاز عرض مرئي projection .. الخ 
• حجم جهاز العرض.

مثال: 

@media print {
    /* القواعد التي ستُطبق عند استيفاء شروط استعلامات الوسيط */
}

@media screen and (min-width: 720px) {
    body {
        background-color: skyblue;
    }
}

وتستعمل الصيغة and (..) لتحديد خصائص هذا الوسيط (جهاز العرض). فقد ترغب في ضبط خصائص معينة في حجم ما او جهاز عرض ما فقد يأخذ حاو ما مثلا عرض 100 بالمئة من عرض الشاشة في الشاشات الصغيرة و عرض 70 بالمئة مثلا في الشاشات الأكبر وهكذا .. 

من الشائع استخدام مكتبات التنسيق التي تدعم تصميم الويب التجاوبي مثل بوتستراب أو TailwindCSS.

تعرف أكثر عن ملاحظات للعاملين بلغة css > استعلامات الوسائط (Media Queries) في CSS