Ngôn ngữ

Hướng dẫn về Responsive Web Design

Điều gì responsive design là, vì sao Google khuyến nghị điều này over dynamic serving hoặc tách biệt mobile URLs, cách đó viewport meta tag làm điều này hoạt động, và đó xếp hạng myth.

Xuất bản lần đầu: 2 thg 7, 2026 · Cập nhật lần cuối: 8 thg 8, 2026 · Advanced
Ngôn ngữ
AIĐược viết bởiAI v2

Responsive web design serves đó giống nhau HTML on đó giống nhau URL để mỗi device và dùng CSS media các truy vấn để adapt đó layout để đó viewport. đây là Google được khuyến nghị mobile configuration — không vì điều này ranks tốt hơn (điều này không; Google có đã nói so outright) nhưng vì có một URL và một set of HTML để crawl và chỉ mục, mà làm điều này đó easiest để implement và maintain. Điều này requires một correct viewport meta tag để hoạt động tại all — không có điều này, phones fake một desktop-width viewport và của bạn media các truy vấn không bao giờ fire. Điều này contrasts với dynamic serving (giống nhau URL, khác nhau HTML qua một Vary header) và tách biệt URLs (m-dot). Responsive không tự động fast: layout adaptation không phải performance, so Core Web Vitals vẫn cần tách biệt attention.

TL;DR — Responsive web design serves đó giống nhau HTML on đó giống nhau URL để mỗi device và dùng CSS media các truy vấn để adapt đó layout để đó viewport. Google khuyến nghị điều này — “the easiest design pattern to implement and maintain” (bản dịch) «đó easiest design pattern để implement và maintain» — nhưng explicitly làm không xếp hạng điều này trên dynamic serving hoặc tách biệt URLs. Của nó real edge là operational: một URL, một set of HTML, so nội dung parity là tự động và Google own mobile-đầu tiên-lập chỉ mục checklist “only applies to dynamic serving and separate URL configurations.” (bản dịch) «chỉ áp dụng để dynamic serving và tách biệt URL configurations.» Điều này requires một correct viewport meta tag để function — không có điều này phones assume một desktop-width viewport (980px iOS / 800px old Android) và của bạn media các truy vấn không bao giờ fire. Contrast: dynamic serving (giống nhau URL, khác nhau HTML qua Vary: User-Agent) và tách biệt URLs (m-dot). Responsive controls layout, không speed — một responsive site có thể vẫn fail Core Web Vitals.

Evidence for this claim Responsive design differs from dynamic serving, which changes HTML by user agent at one URL, and separate mobile URLs, which use distinct URLs. Scope: mobile and desktop rendered web documents Confidence: high · Verified: Mobile-first indexing best practices Evidence for this claim Responsive design serves the same HTML at the same URL while CSS adapts display to screen size. Scope: Google definition of responsive web design. Confidence: high · Verified: Google Search Central: Responsive design Evidence for this claim Google recommends responsive design because it is the easiest mobile pattern to implement and maintain. Scope: Google configuration recommendation. Confidence: high · Verified: Google Search Central: Mobile configurations

definition, precisely

Google own words: responsive design “serves the same HTML code on the same URL regardless of the users’ device (for example, desktop, tablet, mobile, non-visual browser), but can display the content differently based on the screen size.” (bản dịch) «serves đó giống nhau HTML code on đó giống nhau URL regardless of đó người dùng’ device (ví dụ, desktop, tablet, mobile, non-visual trình duyệt), nhưng có thể display đó nội dung differently dựa trên đó screen size.» Đó sentence contains đó toàn bộ ý tưởng:

  • giống nhau HTML — một markup payload, không device-cụ thể một.
  • giống nhau URL — không chuyển hướng để m.example.com, không người dùng-agent fork.
  • Displayed differently by screen size — qua CSS media các truy vấn.

đó là đó line đó separates điều này từ đó hai other configurations Google documents. Dynamic serving “uses the same URL regardless of device… relies on user-agent sniffing and the Vary: user-agent HTTP response header to serve a different version of the HTML to different devices.” (bản dịch) «dùng đó giống nhau URL regardless of device… relies on người dùng-agent sniffing và đó HTTP header phản hồi để serve một khác nhau version of đó HTML để khác nhau devices.» Tách biệt URLs “serves different HTML to each device, and on separate URLs,” (bản dịch) «serves khác nhau HTML để mỗi device, và on tách biệt URLs,» chuyển hướng người dùng để đó device-appropriate version. Responsive là đó chỉ một of đó three với một single HTML nguồn.

Evidence for this claim Responsive design differs from dynamic serving, which changes HTML by user agent at one URL, and separate mobile URLs, which use distinct URLs. Scope: mobile and desktop rendered web documents Confidence: high · Verified: Mobile-first indexing best practices

Vì sao Google khuyến nghị nó — simplicity, không xếp hạng edge

Google là trực tiếp: điều này “recommends Responsive Web Design because it’s the easiest design pattern to implement and maintain.” (bản dịch) «khuyến nghị Responsive Web Design vì đây là đó easiest design pattern để implement và maintain.» Note điều gì đó reason là và không — đây là an operational argument (một codebase, ít hơn moving parts), không một xếp hạng argument.

Evidence for this claim Google recommends responsive design because it is the easiest mobile pattern to implement and maintain. Scope: Google configuration recommendation. Confidence: high · Verified: Google Search Central: Mobile configurations

Đó single hầu hết hữu ích — và hầu hết underused — line trong Google mobile-đầu tiên best-practices doc là đó phạm vi note: “The contents of this guide only apply to dynamic serving and separate URL configurations. In case of responsive design, the content and the metadata are the same on the mobile and desktop version of the pages.” (bản dịch) «Đó nội dung of này hướng dẫn chỉ apply để dynamic serving và tách biệt URL configurations. Trong case of responsive design, đó nội dung và đó metadata là đó giống nhau on đó mobile và desktop version of đó các trang.» Đọc đó again. Google là telling bạn đó hầu hết of của nó dài mobile-đầu tiên checklist — matching dữ liệu có cấu trúc trên versions, matching robots meta tags, matching alt text, setting Vary các header, wiring lên rel=alternate/canonical các chú thích — đơn giản không apply để bạn nếu bạn là responsive, vì có chỉ một version để nhận right. đó là đó strongest practical case cho RWD, và gần như không ai frames điều này đó way.

Đó knock-on benefits all flow từ “one URL, one HTML” (bản dịch) «một URL, một HTML»:

  • Không duplicate-nội dung hoặc parity risk giữa example.com/page và m.example.com/page — có không có gì để diverge.
  • Không Vary: User-Agent fragility way dynamic serving carries ( bộ nhớ đệm đó bỏ qua header có thể phục vụ sai HTML để sai device — hoặc để Googlebot).
  • Không chuyển hướng chains hoặc link-equity splitting trên desktop và mobile các URL.
  • Không chú thích machinery (rel=alternate on desktop, rel=canonical on mobile) để maintain và nhận sai.

Này là chính xác vì sao, trong my Ahrefs hướng dẫn on mobile-đầu tiên lập chỉ mục, “use responsive design” (bản dịch) «dùng responsive design» là đó đầu tiên of đó ten tips cho building một mobile-friendly site — điều này xóa toàn bộ categories of các vấn đề trước they bắt đầu.

Làm responsive design trực tiếp improve thứ hạng? Không.

Này là đó myth để kill sớm. Google Zineb Ait Bahajji put điều này plainly: Google làm không xếp hạng responsive-design các trang tốt hơn các trang dùng other configurations (tách biệt mobile các trang hoặc dynamic serving). Google vẫn prefers RWD — vì đây là easier để maintain, tương lai-friendly, và they see ít hơn configuration các lỗi với điều này — nhưng “fewer errors” (bản dịch) «ít hơn các lỗi» không phải đó giống nhau as “a ranking bonus.” (bản dịch) «một xếp hạng bonus.» MỘT well-implemented dynamic-serving hoặc m-dot site đó giữ parity có thể xếp hạng identically; đó risk với những là đó they drift, và drift là điều gì hurts bạn.

So honest cách diễn đạt: responsive design không win bạn thứ hạng. nó saves bạn từ losing them để parity mistake, và nó saves bạn maintenance time. Cả hai là worth lot — neither là algorithm boost.

Cách nó hoạt động: viewport meta tag là prerequisite, không nicety

Hầu hết các hướng dẫn list đó viewport meta tag as một bullet among nhiều CSS tips. Điều này không một tip — đây là đó điều đó làm responsive design function tại all. Google 2012 Tìm kiếm Central post explaining vì sao Google itself went responsive là blunt về vì sao: “By default, smartphone browsers pretend to be high-resolution desktop browsers, and lay out a page as if you were viewing it on a desktop monitor… The default viewport width for the default Android browser is 800px, and 980px for iOS, regardless of the number of actual physical pixels on the screen.” (bản dịch) «Theo mặc định, smartphone các trình duyệt pretend để là cao-resolution desktop các trình duyệt, và lay out một trang as nếu bạn đã là viewing điều này on một desktop monitor… Đó default viewport width cho đó default Android trình duyệt là 800px, và 980px cho iOS, regardless of đó number of thực tế physical pixels on đó screen.»

đó là đó chế độ lỗi: không có một viewport tag, một phone renders trang của bạn vào an 980px-wide canvas và thì shrinks đó toàn bộ điều để fit — tiny text, “overview mode,” (bản dịch) «overview chế độ,» và của bạn cẩn thận-được viết max-width: 479px media query không bao giờ triggers, vì đó trình duyệt thinks điều này là 980px wide. Đó cách sửa là đó một line: “In order to trigger the browser to render your page at a more readable scale, you need to use the viewport meta element: <meta name="viewport" content="width=device-width, initial-scale=1">.” (bản dịch) «Trong order để trigger đó trình duyệt để render trang của bạn tại một hơn readable quy mô, bạn cần để dùng đó viewport meta element: .» Setting width=device-width cũng có nghĩa là đó layout cập nhật khi người dùng rotates đó device, mà là điều gì lets media các truy vấn respond để orientation. Deep mechanics — initial-scale, đó user-scalable/maximum-scale accessibility traps — trực tiếp trong đó dedicated viewport meta tag bài viết.

Cách nó hoạt động: CSS media các truy vấn

với viewport đặt correctly, layout adapts với CSS media các truy vấn — rules đó apply chỉ tại certain viewport widths:

<style>
/* Base styles apply everywhere */
@media screen and (max-width: 479px) {
  /* Portrait smartphones: stack columns, hide the sidebar, grow tap targets */
}
@media screen and (min-width: 480px) and (max-width: 1024px) {
  /* Tablets */
}
</style>

Treat pixel các giá trị trên as illustrative, không checklist để copy. durable practice — echoed trên MDN’s media-query reference và web.dev responsive-design course — là để treat breakpoints as layout decision, không device list: đặt them nơi của bạn own nội dung thực ra breaks ( nav wraps badly, các cột nhận cũng hẹp, text ngắn-lines), và kiểm thử ranges giữa breakpoints cũng, không chỉ handful của named screen sizes. Device viewport widths thay đổi mỗi sản phẩm cycle; nội dung-driven breakpoints không cần updating Khi họ làm.

Google 2012 post cũng flagged đó CSS discipline đó giữ một responsive layout từ breaking: “Instead of specifying width for container elements, we started using max-width instead. In place of height we used min-height, so larger fonts or multi-line text don’t break the container’s boundaries.” (bản dịch) «Thay vì specifying cho container elements, we đã bắt đầu dùng thay vì. Trong place of we dùng , so lớn hơn fonts hoặc multi-line text không break đó container boundaries.» Của họ three guiding principles đã là equally đơn giản: các trang nên render legibly tại bất kỳ resolution, một set of nội dung nên là viewable on bất kỳ device, và bạn nên “never show a horizontal scrollbar, whatever the window size.” (bản dịch) «không bao giờ cho thấy một horizontal scrollbar, whatever đó window size.» Modern refinements (clamp() cho fluid loại, container các truy vấn, srcset/<picture> cho device-appropriate images) sit on top of đó foundation — họ là không bắt buộc để là “truly” responsive. Cho implementation depth beyond đó SEO cách diễn đạt, Google own web.dev Learn Responsive Design course là đó place để go.

Responsive so với. dynamic serving so với. tách biệt các URL

three configurations Google documents, side by side:

Responsive designDynamic servingTách biệt các URL (m-dot)
URLMột URLMột URLkhác các URL (m.example.com)
HTMLgiống nhau HTML cho allkhác HTML theo devicekhác HTML theo device
Cách nó adaptsCSS media các truy vấnmáy chủ người dùng-agent sniffingchuyển hướng để device-cụ thể trang web
Extra requirementViewport meta tagVary: User-Agent headerrel=alternate + rel=canonical, hreflang trên versions
Parity riskThấp — một versionMedium — easy để driftCao — hai các trang để sync
Google stanceĐược khuyến nghịSupportedSupported, least được khuyến nghị

Dynamic serving vẫn làm hợp lý occasionally (e.g. radically khác device experiences đó single template có thể’t reasonably express); tách biệt các URL là mostly legacy hiện tại. nếu bạn’re on either, đầy đủ deep dives — including Vary header mechanics cho dynamic serving — là trong dynamic serving bài viết. nhưng cho greenfield xây dựng, responsive là default câu trả lời, và burden của proof là on chọn bất cứ điều gì khác.

Bing angle: criteria, không architecture

Bing agrees với đó outcome nhưng frames điều này differently. Điều này không endorse “Responsive Web Design” (bản dịch) «Responsive Web Design» by name đó way Google làm; thay vì của nó mobile-friendliness kiểm thử evaluates testable criteria — viewport và zoom-control configuration, width of trang nội dung, readability of text, spacing of links và other tap targets, và dùng of incompatible plug-ins. Điều này khuyến nghị đó giống nhau viewport tag Google làm, và của nó nội dung-width rule là đó “the content width should not exceed the screen width” (bản dịch) «đó nội dung width không nên exceed đó screen width» — overflow nhận flagged as “Page content does not fit device width.” (bản dịch) «Trang nội dung không fit device width.» So đây là safe để chẳng hạn Bing và Google cả hai reward mobile-friendly kết xuất; chỉ thuộc tính đó rõ ràng được khuyến nghị-configuration language để Google cụ thể.

Responsive design và mobile-đầu tiên lập chỉ mục (post-July 2024)

Mobile-đầu tiên lập chỉ mục là đã xong — Google finished đó rollout, và điều này hiện tại dùng đó mobile-được crawl version of trang của bạn cho lập chỉ mục và xếp hạng theo mặc định. Gần như mỗi hướng dẫn vẫn ghi về responsive design as một “get ready for mobile-first indexing” (bản dịch) «nhận ready cho mobile-đầu tiên lập chỉ mục» tương lai-tense move. Đó cách diễn đạt là stale. Đó rollout là hoàn tất, và cho an đã-responsive site điều này thay đổi không có gì — nội dung của bạn và metadata là đã giống hệt trên mobile và desktop vì có một version. đó là không một coincidence; đây là đó entire point. Đó site mobile-đầu tiên lập chỉ mục bài viết covers đó timeline và đó parity rules trong đầy đủ.

Responsive ≠ tự động fast

biggest trap. Responsive design controls layout, không performance. responsive trang web có thể vẫn ship 3 MB desktop hero image đó phones chỉ quy mô xuống trong CSS, hoặc gửi desktop-weight JavaScript để mobile device — và fail LCP hoặc CLS badly. “Responsive” không phải Core Web Vitals truyền. Truly optimizing có nghĩ là serving appropriately sized assets theo breakpoint (đó Điều gì srcset/<picture> và responsive images là cho), không chỉ letting CSS shrink oversized ones. khắc phục performance riêng — see Core Web Vitals nội dung và responsive-images material cho Cách.

Performance không phải chỉ assumption đó không tự động hold. Một codebase không bảo đảm giống hệt kết xuất, accessibility, hoặc tìm kiếm-kết quả presentation either — các trình duyệt và devices vẫn differ đủ trong Cách họ xử lý CSS, fonts, và JavaScript-phụ thuộc layout đó cross-device và cross-trình duyệt kiểm thử vẫn giữ part của job, giống nhau as nó sẽ dưới bất kỳ khác configuration. “Responsive” mô tả architecture, không verified outcome; kiểm thử nó như bạn’d kiểm thử bất cứ điều gì khác.

little history

Worth một paragraph, vì điều này reframes đó toàn bộ “best practice.” (bản dịch) «best practice.» Google đã không khuyến nghị responsive design đầu tiên và adopt điều này sau đó — điều này went responsive on của nó own properties đầu tiên, cho engineering reasons, và đó khuyến nghị followed. As của nó 2012 post giải thích, Google “faced a stark choice between creating mobile specific websites, or adapting existing sites… Creating two sites would allow us to better target specific hardware, but maintaining a single shared site preserves a canonical URL, avoiding any complicated redirects, and simplifies the sharing of web addresses.” (bản dịch) «faced một stark lựa chọn giữa creating mobile cụ thể websites, hoặc adapting existing các trang… Creating hai các trang sẽ cho phép us để tốt hơn đích cụ thể hardware, nhưng maintaining một single shared site preserves một canonical URL, avoiding bất kỳ complicated các chuyển hướng, và simplifies đó sharing of web addresses.» Canonical-URL preservation, không chuyển hướng complexity, simpler sharing — những đã là đó reasons trước anyone called điều này an SEO best practice, và họ là vẫn đó reasons.

Nơi này sits trong đó bigger picture: responsive design là một piece of đó rộng hơn mobile SEO story, alongside mobile usability, intrusive interstitials, đó history of AMP, và đó mobile SEO checklist đó ties them together. Này bài viết là đó “how should I serve mobile?” (bản dịch) «cách nên I serve mobile?» piece; đó others cover đó rest.

Add an expert note

Pin an expert quote

New person? Create their unclaimed profile at /admin/experts/ → Pin a quote first.