Lesson 11 / الدرس 11

Responsive: prefixes instead of media queries / التجاوب: بادئات بدل استعلامات الوسائط

This is the thing frameworks do best. A media query becomes a prefix on a class, and a layout that changes at three screen sizes fits on one line.

وهذا أفضل ما تفعله الأطر. فاستعلام الوسائط يصير بادئة على صنف، والتخطيط الذي يتغير عند ثلاثة أحجام شاشة يتّسع في سطر واحد.

In the CSS course a responsive layout meant writing the rule, then writing a media query, then repeating the selector inside it. Both frameworks compress that into a prefix: md:flex means "flex, from the medium breakpoint up". Everything else about how media queries work is unchanged.

في دورة CSS كان التخطيط المتجاوب يعني كتابة القاعدة، ثم كتابة استعلام وسائط، ثم إعادة المُحدِّد بداخله. ويضغط الإطاران ذلك في بادئة: فـmd:flex تعني "flex من نقطة التوقف المتوسطة فصاعدًا". وكل ما عدا ذلك في عمل استعلامات الوسائط كما هو.

Width from	Tailwind	Bootstrap	Typically
(none)	no prefix	no infix	Phones — the default
576px	—	sm	Large phone
640px	sm:	—	Large phone
768px	md:	md	Tablet
1024px	lg:	lg (992px)	Laptop
1280px	xl:	xl (1200px)	Desktop

The names line up; the exact pixel values do not. More importantly, both are min-width — the prefixed class applies at that width and above. There is no max-width prefix in normal use, and that is deliberate.

Mobile first, and why it is not just a slogan

TAILWIND
  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">

BOOTSTRAP
  <div class="row">
    <div class="col-12 col-md-6 col-lg-3">

Read both left to right:  one column on a phone,
                          two from tablet up,
                          four from laptop up.

The unprefixed class is the phone. Every prefix is an override for a larger screen. That order is not a style preference — it falls out of both frameworks using min-width, and writing it the other way round means fighting the cascade. Run the demonstration and narrow the preview.

Showing and hiding

The prefix works on every utility, including display. hidden md:block shows something only on larger screens; block md:hidden does the opposite. Bootstrap spells the same thing d-none d-md-block. This is how a desktop navigation bar and a mobile menu button live in the same markup.

والبادئة تعمل على كل أداة، بما فيها العرض. فـhidden md:block تُظهر شيئًا على الشاشات الأكبر فقط؛ وblock md:hidden تفعل العكس. ويهجّئ Bootstrap الشيء نفسه d-none d-md-block. وهكذا يعيش شريط تنقل سطح المكتب وزر قائمة الهاتف في الوسوم نفسها.

Two habits make responsive work go quickly. Design the phone layout first and only then add prefixes — starting wide and squeezing produces a page held together with overrides. And test at the awkward widths, not the convenient ones: 360px, and the moment just before each breakpoint, is where layouts actually break.

ولا يعمل شيء من هذا بلا وسم viewport من دورة HTML. فبدون <meta name="viewport" content="width=device-width, initial-scale=1"> يتظاهر الهاتف بأن عرضه 980 بكسل ولا تُبلغ أي نقطة توقف كتبتها إطلاقًا — فتُعرض الصفحة بحجم سطح المكتب مصغَّرة. والإطاران يفترضان وجوده.

Try it live / جرّب بنفسك

<h1>One page, three shapes</h1>

<h2>Tailwind</h2>
<pre>&lt;div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4"&gt;</pre>

<h2>Bootstrap</h2>
<pre>&lt;div class="col-12 col-md-6 col-lg-3"&gt;</pre>

<h2>What broke, and where</h2>
<table>
  <tr><th>Width</th><th>What happened</th><th>Fix</th></tr>
  <tr><td>360px</td><td>…</td><td>…</td></tr>
</table>

<style>
  table { border-collapse: collapse; }
  th, td { border: 1px solid #cbd5e1; padding: .5rem .8rem; text-align: start; }
</style>

Preview / المعاينة

Check yourself / اختبر نفسك

1. What does md:flex mean?

ماذا تعني md:flex؟

2. Why is mobile-first not just a preference?

3. Your breakpoints do nothing on a real phone. What is missing?

Your task / مهمتك

Build one page that changes at three sizes — a stacked column on a phone, two across on a tablet, and a sidebar layout on a laptop — in both frameworks. Include a navigation that is a row of links on wide screens and a single button on narrow ones. Then test at 360px and just below each breakpoint, and report anything that broke at a width you had not looked at.

ابنِ صفحة واحدة تتغير عند ثلاثة أحجام — عمود مكدّس على هاتف، واثنان عرضًا على لوح، وتخطيط بشريط جانبي على حاسوب محمول — في الإطارين. وأدرج تنقلًا يكون صف روابط على الشاشات العريضة وزرًا واحدًا على الضيقة. ثم اختبر عند 360 بكسل وقبل كل نقطة توقف مباشرة، وأبلغ عن كل ما انكسر عند عرض لم تنظر فيه.

Three distinct layouts, in both frameworks ثلاثة تخطيطات متمايزة في الإطارين
Written mobile-first, unprefixed class as the base مكتوبة بالهاتف أولًا، الصنف بلا بادئة أساسًا
A navigation that changes shape تنقّل يغيّر شكله
Tested at 360px and just below each breakpoint مختبَرة عند 360 بكسل وقبل كل نقطة توقف