أتساءل عما إذا كان من الممكن إضافة مقياس تكيفي؟ أود أن يكون لدي مكون شريط جانبي على الجانب الأيمن.
CSS
/* الحصول على عرض صورة المستخدم وتعيين الحد الأقصى لعرض حاوية الإعلان */
/* أنماط حاوية الإعلان */
#list-area {
display: flex; /* ترتيب الإعلانات باستخدام flexbox */
flex-direction: column; /* عرض الإعلانات عموديًا */
gap: 0; /* إزالة المسافات بين صور الإعلانات */
padding: 0; /* إزالة حشو الحاوية */
margin: 0; /* التأكد من عدم وجود هامش إضافي حول حاوية الإعلان */
max-width: 812px; /* تحديد الحد الأقصى لعرض حاوية الإعلان بـ 812 بكسل (عرض الصورة الرمزية: 48 بكسل) */
}
/* أنماط رابط الإعلان */
.banner-ad {
display: block; /* جعل حاوية الإعلان عنصر كتلة */
width: 100%; /* التأكد من أن حاوية الإعلان تشغل 100% من العرض */
max-width: 100%; /* منع تجاوز الحد الأقصى للعرض */
margin: 0; /* إزالة المسافات بين حاويات الإعلانات */
}
/* أنماط صور الإعلانات المتجاوبة */
.ad-image {
width: 100%; /* التأكد من أن الصورة تشغل العرض الكامل للعنصر الأب */
height: auto; /* الحفاظ على نسبة العرض إلى الارتفاع الأصلية للصورة */
max-width: 100%; /* منع الصورة من تجاوز الحد الأقصى لعرض حاويتها */
display: block; /* إصلاح مشكلة المساحة الفارغة أسفل الصور */
margin: 0; /* إزالة أي مساحة إضافية حول الصورة */
}
/* التصميم المتجاوب: ضبط عرض الإعلانات للشاشات الكبيرة والصغيرة */
/* ضبط عرض الإعلانات على الأجهزة التي يقل عرضها عن 768 بكسل */
@media (max-width: 768px) {
#list-area {
padding: 0; /* التأكد من عدم وجود حشو إضافي على الأجهزة المحمولة */
}
.banner-ad {
width: 100%; /* التأكد من أن الإعلان يشغل العرض الكامل على الشاشات الصغيرة */
}
.ad-image {
width: 100%; /* التأكد من أن الصورة تتكيف مع عرض الحاوية */
height: auto; /* الحفاظ على نسبة عرض الصورة إلى ارتفاعها */
}
}
/* ضبط إضافي لصور الإعلانات على الأجهزة الصغيرة جدًا (مثل الهواتف في الوضع الرأسي) */
@media (max-width: 480px) {
.ad-image {
width: 100%; /* التأكد من أن الصور تتكيف مع عرض شاشة الهاتف */
max-width: 100%; /* تعيين الحد الأقصى للعرض إلى 100% لتجنب التكبير الزائد */
height: auto; /* الحفاظ على نسبة عرض الصورة إلى ارتفاعها */
}
}
