Member Avatar for esparkinfo

Hello Friends,

does anyone has worked on media queries? css3?

I have a client who is looking for media queries.... I want to know about that before start my project.
What could be the sizes & if I should use server side code to detect for the device first to prevent the loading of unused assets.

Kindly guide me on that direction...
all your answer is appreciated..

Thanks in Advance!

  • 3 Contributors
  • 2 Replies
  • 102 Views
  • 1 Week Discussion Span
  • Latest Post Latest Post by lps

Dani AI

Generated

Short, practical guidance for (and anyone starting with CSS3 media queries). As noted, responsive layout is the usual approach. Start mobile‑first, set the viewport, and choose breakpoints based on when the design breaks, not on specific device models. Common reference sizes (use them as starting points, not hard rules): ~320–480 (phones), ~481–767 (large phones/small tablets), ~768–991 (tablets), ~992–1199 (desktops), 1200+ (large screens). For a framework mapping see Bootstrap breakpoints (Bootstrap 4/5: 576, 768, 992, 1200).

Include the viewport tag in the head:

<meta name="viewport" content="width=device-width, initial-scale=1">

Avoid server‑side user‑agent sniffing unless the project has strict bandwidth/SEO needs. UA sniffing is brittle and hard to maintain. To stop unwanted downloads on small screens, prefer:

  • responsive images with srcset/picture,
  • lazy loading (native loading="lazy" or JS),
  • conditional asset fetching via client detection (e.g., matchMedia) or client hints when the server supports them.

If server adaptation is required (serve different image sizes, formats), use well‑tested techniques such as responsive images or HTTP client hints rather than brittle UA parsing. For CSS rules and syntax, see the MDN media queries reference: Media queries.

Quick troubleshooting workflow: design mobile‑first, add breakpoints where content needs it, test in Chrome/Firefox device emulators and on a few real devices, throttle network to check payloads, and run Lighthouse to catch performance regressions. As suggested, read the docs first; the MDN links above are good, practical references.

Recommended Answers

All 2 Replies

Member Avatar for <M/>

Please google first... :)

Member Avatar for lps

It depends on your requuirement, some using repsonsive layout for the job.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.