మీడియా క్వెరీలు పరికర లక్షణాల ఆధారంపై CSS ను నిబంధితంగా అన్వయించాయి — చాలా తరచుగా విউపోర్ట్ వెడల్పు — ఒక స్టైల్షీట్ ఫోన్లు, ట్యాబ్లెట్లు మరియు డెస్క్టాప్ల కోసం స్వీకరించటానికి అనుమతిస్తుంది.
{ : ; }
(: ) {
{ : ; : grid; : fr fr; }
}
(: ) {
{ : fr fr fr; }
}
/* ✅ 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 ని ఉత్పత్తి చేయటానికి ఇష్టపడుతుంది మరియు కంటెంట్ ఎలా రీఫ్లో చేస్తుంది అనే విషయానికి సరిపోతుంది.
@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 వినియోగదారు ప్రాధాన్యతలకు స్పందిస్తాయి, తెర పరిమాణం కాదు — అందుబాటు మరియు థీమింగ్ కోసం ముఖ్యమైనది.
@media (min-width: 768px) and (max-width: 1023px) { /* tablets only */ }
మీడియా క్వెరీలు విউపోర్ట్కు ప్రతిస్పందిస్తాయి; కొత్త కంటైనర్ ప్రశ్నలు (@container) పేరెంట్ ఎలిమెంట్ యొక్క పరిమాణానికి ప్రతిస్పందిస్తాయి — నిజమైన పునర్వినియోగయోగ్యమైన భాగాల కోసం ఉత్తమం. వారు మీడియా ప్రశ్నలను భర్తీ చేయటానికి కంటే భర్తీ చేస్తారు.
మీడియా క్వెరీలు ప్రతిస్పందించే డిజైన్ కు ఆధారం — తెర పరిమాణానికి లేఅవుట్, ఖాళీ మరియు నిలువు వరుసలను స్వీకరించడం.
మొబైల్-ఫర్స్ట్ min-width విధానం CSS ని నిర్వహించదగినదిగా ఉంచుతుంది, మరియు ప్రాధాన్యత ప్రశ్నలు (prefers-reduced-motion, prefers-color-scheme) అందుబాటు మరియు థీమింగ్కు ప్రతిస్పందనను విస్తరిస్తాయి.