மீடியா வினாக்கள் எவ்வாறு பதிலளிக்கும் வடிவமைப்பை செயல்படுத்துகிறது?

Question

Accepted Answer

**மீடியா வினாக்கள்** சாதன பண்புகளின் அடிப்படையில் CSS ஐ நிபந்தனையுடன் பயன்படுத்துகின்றன — பெரும்பாலும் **வியூபோர்ட் அகலம்** — ஒரு பாணிப்பிரவாகம் ஃபோன்கள், டேப்லெட்கள் மற்றும் மேசைக்கணினிகளுக்கு மாறிக்கொள்ள அனுமதிக்கிறது.

```css
/* base styles (mobile-first) */
.container { padding: 1rem; }

/* apply only when viewport is AT LEAST 768px wide */
@media (min-width: 768px) {
  .container { padding: 2rem; display: grid; grid-template-columns: 1fr 1fr; }
}

@media (min-width: 1024px) {
  .container { grid-template-columns: 1fr 1fr 1fr; }
}
```

## மொபைல் முதல் (min-width) vs டெஸ்க்டாப் முதல் (max-width)

```css
/* ✅ mobile-first: base = mobile, layer on enhancements as it gets wider */
@media (min-width: 768px) { ... }

/* desktop-first: base = desktop, override down for smaller screens */
@media (max-width: 767px) { ... }
```

**மொபைல் முதல்** (`min-width`) பொதுவாக விரும்பப்படுகிறது: சிறிய திரைகளுக்கான எளிய அடிப்படை பாணிகளை நீங்கள் எழுதுகிறீர்கள், பின்னர் பெரியவற்றுக்கான சிக்கலை படிப்படியாக சேர்க்கிறீர்கள். இது சுத்தமான,가ற்றிய CSS ஐ உற்பத்தி செய்கிறது மற்றும் உள்ளடக்கம் எவ்வாறு மறுபைப்பு செய்கிறது என்பதுடன் பொருந்துகிறது.

## பிற பயனுள்ள வினாக்கள்

```css
@media (max-width: 600px) { }                 /* small screens */
@media (orientation: landscape) { }            /* device orientation */
@media (prefers-color-scheme: dark) { }        /* user wants dark mode */
@media (prefers-reduced-motion: reduce) { }    /* user dislikes animation — accessibility */
@media print { }                                /* print stylesheet */
```

`prefers-reduced-motion` மற்றும் `prefers-color-scheme` ஆனந்த *முன்னுரிமைகளுக்கு* பதிலளிக்கின்றன, திரை அளவு அல்ல — அணுகல் மற்றும் தீம்க்கு முக்கியம்.

## நிபந்தனைகளை இணைத்தல்

```css
@media (min-width: 768px) and (max-width: 1023px) { /* tablets only */ }
```

## எதிர்காலத்தைப் பற்றிய குறிப்பு: கொள்கலன் வினாக்கள்

மீடியா வினாக்கள் **வியூபோர்ட்டுக்கு** பதிலளிக்கின்றன; புதிய **கொள்கலன் வினாக்கள்** (`@container`) *பெற்றோர் உপাதானத்தின்* அளவுக்கு பதிலளிக்கின்றன — உண்மையான পুনரபயோகযோக்கிய சட்டத்துக்கு சிறந்தது. அவை மீடியா வினாக்களை மாற்றாக விட மாறாக நிரப்புகிறது.

## இது ஏன் முக்கியம்

மீடியா வினாக்கள் பதிலளிக்கும் வடிவமைப்பின் ভিত்தி — திரை அளவுக்கு வடிவமைப்பு, அந்தரளம் மற்றும் நெடுவரிசைகளை மாற்றியமைக்க.

மொபைல் முதல் `min-width` அணுகுமுறை CSS ஐ நிர்வகிக்கும்வாறு வைத்திருக்கிறது, மற்றும் முன்னுரிமை வினாக்கள் (`prefers-reduced-motion`, `prefers-color-scheme`) அணுகல் மற்றும் தீம்க்கு பதிலளிப்பு விரிவுபடுத்துகிறது.