Responsive Design: Benefits, Challenges, and Practical Implementation at Ctrip
This article explains what responsive design is, outlines its advantages such as resource savings and SEO benefits, discusses the difficulties encountered with media queries in Ctrip's train‑ticket project, and presents concrete class‑based and server‑side solutions with code examples to improve maintainability and performance.
Responsive design is a method that allows web pages to adapt their layout and styling according to the size of the device screen, providing a seamless experience as the browser window changes.
The main advantages include saving development and design effort by using a single codebase for both desktop and mobile, consolidating URLs which improves SEO and avoids 302 redirects, and reducing the need for separate maintenance of multiple sites.
In Ctrip’s train‑ticket project, the team faced problems such as a large amount of media‑query CSS that made the code hard to read, deep nesting that reduced readability, and increased bundle size when supporting both platforms.
Example of the problematic media‑query CSS:
.box { font-size: 14px; }
@media only screen and (min-width: 760px) { .box { font-size: 18px; } }The proposed solution is to add a class (e.g., h5 for mobile and pc for desktop) to the <html> element and write styles scoped to those classes, eliminating most media queries.
<html class="isMobile ? 'h5' : 'pc'"></html>.box { font-size: 14px; .pc & { font-size: 18px; } }This approach lets the same stylesheet serve both platforms, with the appropriate class overriding styles when needed, and can be driven by screen size or user‑agent detection.
To handle the increase in bundle size for components that differ between platforms, the team uses dynamic component loading for non‑critical modules and server‑side rendering (SSR) to select the correct page based on the user‑agent.
{ reg: '/xxx', pageName: 'xxx.html' }{ reg: '/xxx', pageName(req) { return /mobile/i.test(req.headers['user-agent']) ? 'xxxh5.html' : 'xxxpc.html'; } }When front‑end routing is involved and the request object is unavailable, the configuration can expose separate page names for mobile and desktop, allowing the front‑end to switch pages without a full reload.
{ reg: '/xxx', h5PageName: 'xxxh5.html', onlinePageName: 'xxxpc.html' }For image assets, small icons are replaced with icon fonts, while larger images use srcset or image-set to serve appropriate resolutions, ensuring compatibility across devices.
Responsive design is suitable for most web applications where the functionality on desktop and mobile is similar and interaction complexity is moderate; it improves development efficiency and performance without significant size penalties, as demonstrated in Ctrip’s order detail and completion pages.
Recommended Reading:
Trip.com Ticket RN Clean Architecture 2.0 Practice
Ctrip Desktop Front‑End Memory Optimization and Monitoring
Building a Complete Front‑End React Component Library from Scratch
Evolution of Ctrip’s Front‑End Architecture for Vacation Wireless
Ctrip Technology
Official Ctrip Technology account, sharing and discussing growth.
How this landed with the community
Was this worth your time?
0 Comments
Thoughtful readers leave field notes, pushback, and hard-won operational detail here.