اذهب إلى المحتوى

السؤال

Recommended Posts

  • 0
نشر

يمكنك تنفيذ ذلك عبر إستخدام ميديا كويري 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 يُصبح كل عنصر في سطر وحده حتى تتناسب مع الشاشات الصغيرة

  • 0
نشر

يعرف هذا بتصميم الويب التجاوبي او المتجاوب 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

انضم إلى النقاش

يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.

زائر
أجب على هذا السؤال...

×   لقد أضفت محتوى بخط أو تنسيق مختلف.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   جرى استعادة المحتوى السابق..   امسح المحرر

×   You cannot paste images directly. Upload or insert images from URL.

  • إعلانات

  • تابعنا على



×
×
  • أضف...