Responsive design is a method of building web pages so they adjust automatically to the width and capabilities of the device, from phones to wide monitors. It relies on fluid layouts, flexible images and CSS media queries.
Why it matters
Most traffic comes from mobile devices, and search engines evaluate the mobile version of pages. A responsive page avoids separate mobile sites, keeps one URL per page and prevents tiny text, sideways scrolling and overlapping elements.
Test at real device widths and with browser dev tools, and check touch targets, since a layout that fits can still be hard to tap.
Example
<meta name="viewport" content="width=device-width, initial-scale=1">.grid { display: grid; grid-template-columns: repeat(3, 1fr); }
@media (max-width: 700px) { .grid { grid-template-columns: 1fr; } }Common mistakes
- Leaving out the viewport meta tag, so phones render a zoomed-out desktop page.
- Using fixed pixel widths for containers and images.
- Hiding important content on small screens instead of reorganizing it.
Related
Get notified when this term updates
Plus occasional practical tips on uptime and monitoring, nothing else. Unsubscribe anytime.
यह पेज सामान्य जानकारी है, जिसे हमारी संपादकीय टीम ने लिखा है और दस्तावेज़ीकरण बदलने पर अपडेट किया जाता है। सर्वर और प्रदाता अलग-अलग होते हैं, इसलिए बदलाव पहले सुरक्षित तरीके से जाँचें। देखें: संपादकीय नीति और अस्वीकरण.