Back to Glossary

Media Query

استعلام الوسائط (Media Query)

Beginnercss1 min read
@mediacss media querybreakpointresponsive breakpointscreen size
Official DocsSign in to save & take notes

Definition

CSS syntax for applying styles conditionally based on screen size, orientation, or device capability.

بنية CSS لتطبيق الأنماط بشكل مشروط بناءً على حجم الشاشة أو الاتجاه أو إمكانية الجهاز.

Why It Matters

Responsive design in 404Fault is built with Tailwind's breakpoint prefixes. Understanding that `sm:grid-cols-2` means 'two columns at 640px+' is how you read and write all responsive layouts.

التصميم المتجاوب في 404Fault مبني ببادئات نقطة توقف Tailwind. فهم أن `sm:grid-cols-2` يعني 'عمودان عند 640px+' هو كيفية قراءة وكتابة جميع التخطيطات المتجاوبة.

Full Definition

Media queries use `@media` to conditionally apply CSS based on viewport size, device type, or user preferences (like `prefers-color-scheme`). Tailwind CSS uses utility-prefixed breakpoints instead of writing @media directly: `sm:` (640px+), `md:` (768px+), `lg:` (1024px+), `xl:` (1280px+). The mobile-first approach means base styles target small screens and breakpoints add larger-screen overrides.
استعلامات الوسائط تستخدم `@media` لتطبيق CSS بشكل مشروط بناءً على حجم viewport أو نوع الجهاز أو تفضيلات المستخدم. Tailwind يستخدم بادئات نقطة التوقف بدلاً من كتابة @media مباشرةً: `sm:` و`md:` و`lg:` و`xl:`.

Example Usage

“<div className='grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4'> — mobile: 1 col, tablet: 2, desktop: 3”

“<div className='grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4'> — موبايل: عمود واحد، تابلت: 2، سطح مكتب: 3”

Knowledge Graph

AI Builder Tips

Sign in for more features

Avoid these mistakes when using Media Query:

1

Desktop-first approach — harder with Tailwind, which is mobile-first by default

2

Too many custom breakpoints — stick to the standard sm/md/lg/xl set

Sign in to unlock guided AI explanations from AI Teacher.

Generate a Prompt

Copy this prompt and use it directly with any AI model — no setup needed.

Ready-to-Use Prompt
Help me build a project using Media Query.

Explain:
1. What is Media Query and why it matters
2. The core architecture and required tools
3. Step-by-step implementation plan
4. Common mistakes to avoid: Desktop-first approach — harder with Tailwind, which is mobile-first by default, Too many custom breakpoints — stick to the standard sm/md/lg/xl set
5. Best practices and production tips

Official Resources

Official Documentation
Browse all AI termsCreate free account