Trang chủ UXMagic
  • Tính năng
  • Thư viện
  • Cộng đồng
  • Bảng giá
  • Tiếp thị liên kết
  • Tài nguyên
Trang chủ UXMagic
Trang chủ UXMagic

Thư viện

Cộng đồng
Bảng giá
Tiếp thị liên kết

Tài nguyên

Theo dõi chúng tôi trên:
  • Theo dõi chúng tôi trên Slack
  • Theo dõi chúng tôi trên Twitter
  • Theo dõi chúng tôi trên Linkedin
  • Theo dõi chúng tôi trên Youtube
  • Theo dõi chúng tôi trên Instagram
Trung tâm trợ giúp
  • 🚀Bắt đầu
  • ✨Tạo thiết kế
  • 🎨Thiết kế & chỉnh sửa
    • Chỉnh sửa một màn hình
    • Chỉnh sửa qua trò chuyện
    • Chủ đề và bộ quy chuẩn
    • Phông chữ và kiểu chữ
    • Hình ảnh trong thiết kế của bạn
    • Phiên bản và lịch sử
    • Biến thể responsive và theo thiết bị
    • Thư viện thành phần và hệ thống thiết kế
  • 📦Xuất & bàn giao
  • 🌐Xuất bản website
  • 🤝Chia sẻ & cộng tác
  • 🔌Tích hợp & lập trình
  • 💳Gói, tín dụng & thanh toán
  • 🛠Xử lý sự cố

Vẫn còn vướng?

Đội ngũ của chúng tôi trả lời ngay trong sản phẩm.

Liên hệ hỗ trợ →
  1. Trung tâm trợ giúp/
  2. Thiết kế & chỉnh sửa/
  3. Biến thể responsive và theo thiết bị

Biến thể responsive và theo thiết bị

Tạo bản di động và máy tính cho một màn hình và giữ chúng đồng bộ.

Cập nhật lần cuối: 27 tháng 8, 2026

Trong trang này

  • Tạo một biến thể
  • Chi phí
  • Giữ các biến thể đồng bộ
  • Chủ đề dùng chung
  • Mã đã xuất

Tạo một biến thể#

Hãy yêu cầu, hoặc dùng thanh chọn thiết bị trên màn hình:

Tạo bản di động cho trang giới thiệu.

Biến thể là một màn hình mới trên canvas, được điều chỉnh theo chiều rộng đích — không phải một lần co giãn linh hoạt. Bố cục thật sự được sắp xếp lại: các phần nhiều cột xếp chồng, thanh điều hướng thu gọn, kiểu chữ hạ thang.

Chi phí#

Chuyển một màn hình sang kích cỡ thiết bị khác được tính theo từng màn hình, cùng mức với một lượt tạo lại, bởi vì nó chính là vậy. Chuyển tám màn hình tốn gấp tám lần — nên kiểm tra số dư trước.

Giữ các biến thể đồng bộ#

Biến thể là những màn hình riêng biệt, nên một chỉnh sửa sau này trên bản máy tính không tự chảy sang bản di động. Hai lựa chọn:

  • Yêu cầu thay đổi trên cả hai một cách rõ ràng: “Trên cả trang giới thiệu bản máy tính lẫn bản di động, đổi CTA thành ‘Bắt đầu miễn phí’.”
  • Hoặc hoàn thiện bản máy tính trước, rồi tạo các biến thể một lần ở cuối. Đây thường là thứ tự tiết kiệm hơn.

Chủ đề dùng chung#

Cả hai biến thể dùng chủ đề của dự án, nên thay đổi màu và phông chữ tự động áp cho cả hai. Chỉ bố cục là riêng của từng biến thể.

Mã đã xuất#

Mã đã xuất phản ánh đúng màn hình bạn xuất. Nếu bạn cần một bản hiện thực thật sự responsive thay vì hai bố cục cố định, hãy xuất màn hình máy tính rồi điều chỉnh, hoặc xuất cả hai và ghép lại ở breakpoint — xem Xuất mã nguồn.

Bài viết này có hữu ích không?

Bài liên quan

Chỉnh sửa một màn hình

Ba cách thay đổi một thiết kế — trò chuyện, chế độ chỉnh sửa và chủ đề — và khi nào mỗi cách là đúng công cụ.

Chủ đề và bộ quy chuẩn

Chủ đề của dự án hoạt động ra sao, cách đổi nó an toàn, và vì sao không bao giờ nên sửa màu theo từng màn hình.

Xuất mã nguồn (HTML, React, Tailwind)

Xuất một màn hình đơn lẻ hoặc cả dự án thành mã front-end sẵn sàng cho môi trường thật.

← TrướcPhiên bản và lịch sửTiếp →Thư viện thành phần và hệ thống thiết kế

Trong trang này

  • Tạo một biến thể
  • Chi phí
  • Giữ các biến thể đồng bộ
  • Chủ đề dùng chung
  • Mã đã xuất

ý tưởng tiếp theo của bạn
xứng đáng được ra đời

đừng chỉ nghĩ về nó nữa. cứ gõ ra đi. Vụng về, dang dở, sao cũng được. Chúng tôi sẽ biến nó thành điều có thật.

Sản phẩm

  • Cộng đồng
  • Các gói giá
  • Chương trình tiếp thị liên kết
  • UXMagic MCP
  • Claude MCP
  • Thông tin AI

Tài nguyên

  • Trung tâm trợ giúp
  • Thư viện Figma
  • Thư viện React
  • Mẫu ứng dụng di động
  • Tài liệu
  • Hướng dẫn

Tính năng

  • Từ câu lệnh thành UI
  • Từ hình ảnh thành UI
  • Từ bản phác thảo thành UI
  • Sao chép website
  • Nhập từ Figma
  • AI Wireframe Generator
  • AI Mockup Generator
  • AI Prototype Generator
  • AI Dashboard Generator
  • Tất cả tính năng

So sánh

  • vs UX Pilot
  • vs Relume
  • vs MagicPath
  • vs Magic Patterns
  • vs Banani
  • vs Galileo AI
  • vs v0
  • vs Lovable
  • vs Base44
  • Tất cả đối thủ

Blog

  • AI trong quy trình thiết kế UX: Điều gì thực sự hiệu quả
  • Mẫu câu lệnh cho dashboard SaaS
  • Những câu lệnh thực tế chúng tôi dùng để tạo luồng sản phẩm
  • Prompt Engineering cho UX Designer
  • Công cụ Wireframe tốt nhất năm 2026: So sánh 10 lựa chọn miễn phí & trả phí
  • Tất cả bài viết

Công ty & Hỗ trợ

  • Tuyển dụng
  • Liên hệ
  • Chính sách bảo mật
  • Điều khoản sử dụng
  • Cài đặt cookie
  • Theo dõi chúng tôi trên Slack
  • Theo dõi chúng tôi trên Twitter
  • Theo dõi chúng tôi trên Linkedin
  • Theo dõi chúng tôi trên Youtube
  • Theo dõi chúng tôi trên Instagram

© 2026 UXMagic AI Technologies Inc.