Media Queries & Mobile-First Design

Responsive Design Foundations

Mobile-First vs Desktop-First

Approach	Base Styles For	Media Queries	Performance
Mobile-First ✅	Small screens	min-width (add complexity)	Better — mobile loads less CSS
Desktop-First ❌	Large screens	max-width (override complexity)	Worse — mobile downloads desktop CSS

Modern Media Query Syntax

CSS now supports range syntax (Level 4) which is more readable:

/* Old syntax */
@media (min-width: 768px) and (max-width: 1023px) { }

/* New range syntax ✅ */
@media (768px <= width < 1024px) { }
@media (width >= 1024px) { }

Common Breakpoints

Device	Breakpoint	Tailwind Class
Small mobile	< 640px	(default)
Large mobile	≥ 640px	sm:
Tablet	≥ 768px	md:
Laptop	≥ 1024px	lg:
Desktop	≥ 1280px	xl:
Large Desktop	≥ 1536px	2xl:

Logical Properties for RTL/LTR

Logical properties work correctly in both left-to-right (English) and right-to-left (Arabic, Hebrew) layouts:

Physical (Old) ❌	Logical (New) ✅
margin-left	margin-inline-start
margin-right	margin-inline-end
padding-top	padding-block-start
width	inline-size
height	block-size
text-align: left	text-align: start

Aspect Ratio

The aspect-ratio property prevents layout shift by reserving the correct space before content loads:

img { aspect-ratio: 16 / 9; width: 100%; object-fit: cover; }

object-fit & object-position

Value	Behavior
cover	Fills container, crops excess (most common)
contain	Fits inside container, may leave gaps
fill	Stretches to fill (may distort)
none	Original size, may overflow
scale-down	Like contain, but never scales UP