بدون استعلامات الوسائط: تحقيق سطح مكتب سلس مكون من 3 أعمدة إلى تخطيط متنقل مكون من عمود واحد

تخدم استعلامات الوسائط التقليدية دورًا حاسمًا في التكيف تخطيطات موقع الويب لأحجام الشاشات المختلفة. ومع ذلك، في السعي لإنشاء تصميم سلس وسريع الاستجابة، هناك رغبة في استكشاف حلول بديلة تلغي الحاجة إلى استعلامات الوسائط.

فكر في موقع ويب ذو تخطيط مكون من 3 أعمدة على أجهزة سطح المكتب:

   |  |  |
---| ---| ---|
| 1 | 2 | 3 |

على الهاتف المحمول، يجب أن يتحول التخطيط إلى عمود واحد:

|
---|
| 1 |
| 2 |
| 3 |

لتحقيق ذلك بشكل ديناميكي، تأتي ميزات CSS القوية للإنقاذ:

Grid and Clamp

.grid-wrapper {
   display: grid;
   gap: 15px;
   grid-template-columns: repeat(clamp(1, calc(100% - 500px), 3), 33%);
}

تنشئ وظيفة التكرار () عددًا محددًا من الأعمدة، ويضمن المشبك () عمودًا واحدًا على الأقل عندما يتقلص إطار العرض إلى أقل من 500 بكسل.

Flexbox والهامش السلبي

.flex-container {
   display: flex;
   flex-direction: row;
}

.flex-item {
   width: 33%; /* initial width */
   margin-right: -15px; /* negative margin to facilitate overlapping */
   background-color: red;
}

/* Breakpoint rule for smaller screens */
@media screen and (max-width: 500px) {
   .flex-item {
      margin-right: 0; /* remove negative margin on mobile */
   }
}

يضمن هذا الأسلوب محاذاة العناصر جنبًا إلى جنب على الشاشات الأكبر حجمًا ولكن يتم تكديسها عموديًا على الشاشات الأضيق. يؤدي الهامش السلبي في البداية إلى إنشاء تداخل، والذي يتم تصحيحه عن طريق إزالته على الشاشات الأصغر حجمًا.

الاستنتاج