Responsive Web Design chỉ việc dùng HTML và CSS để tự động thay đổi kích thước, ẩn, thu nhỏ, phóng to một website để trông nó đẹp mắt hơn trên mọi thiết bị (máy tính desktop, máy tính bảng, điện thoại). Một trang web nên hiển thị đẹp mắt và phù hợp trên mọi thiết bị.

Thiết lập viewport

Khi thiết kế trang web phản hồi tốt trên nhiều thiết bị, hãy thêm phần tử .

Việc này sẽ tạo ra viewport cho trang, hướng dẫn trình duyệt cách kiểm soát kích thước trên trang. Đây là ví dụ của trang web không dùng thẻ meta viewport (bên trái) và trang web có dùng thẻ meta viewport (bên phải).

Sự khác biệt giữa trang có và không dùng thẻ meta

Hình ảnh có độ phản hồi cao

Responsive image hay hình ảnh có độ phản hồi là những hình ảnh tự thay đổi kích thước cho phù hợp với kích thước trình duyệt. Có một số cách để tạo ra hình ảnh có khả năng này.

Dùng đặc tính width

Nếu đặc tính width của CSS được thiết lập là 100%, hình ảnh sẽ tự thu nhỏ và phóng to.

Lưu ý là hình ảnh có thể được phóng to lên hơn so với kích thước ban đầu nên hơn hết là sử dụng đặc tính max-width.

Dùng đặc tính max-width

Nếu dùng đặc tính max-width và đặt 100%, ảnh cũng sẽ tự thu nhỏ khi cần nhưng không bao giờ phóng to lên quá mức kích thước ban đầu.

Hình ảnh khác nhau dựa theo độ rộng của trình duyệt

Phẩn tử

0 trong HTML cho phép dùng những hình ảnh khác nhau với các kích thước cửa sổ trình duyệt khác nhau.

Kích thước văn bản có độ phản hồi cao

Kích thước văn bản có thể được đặt theo đơn vị “vw”, nghĩa là “viewport width” (độ rộng của viewport). Khi đó kích thước văn bản sẽ hiển thị theo kích thước cửa sổ trình duyệt.

Xin chào

Viewport là kích thước cửa sổ trình duyệt. 1vw = 1% độ rộng của viewport. Nếu viewport có độ rộng 50cm thì 1vw là 0.5cm.

Media Query

Bên cạnh việc thay đổi kích thước văn bản và hình ảnh, việc dùng Media Query để trang web hiển thị trên nhiều thiết bị cũng rất phổ biến vì chúng giúp định nghĩa cách hiển thị khác nhau trên các kích thước trình duyệt khác nhau.

Media Query
Thay đổi kích thước cửa sổ trình duyệt

 Sẽ có điểm ngắt khi đạt đến 800px.


 
Danh mục bên trái



 
Nội dung chính



 
Danh mục bên phải

Có sự thay đổi về cách hiển thị khi thay đổi kích thước cửa sổ trình duyệt

Trang web có độ phản hồi cao trông bình thường trên các màn hình máy tính nhưng sẽ nhỏ hơn khi xem trên các thiết bị di động. Hiện có nhiều framework CSS giúp bạn dễ dàng áp dụng điều này cho trang web của mình như w3.css hay Bootstrap. Bootstrap dùng HTML, CSS và jQuery để mang đến khả năng hiển thị trên nhiều thiết bị cho trang.

• Top 20 mẫu template Bootstrap miễn phí dành cho Admin Dashboard
• Top 5 CSS Framework phổ biến mà bạn cần lưu ý

Đây là một ví dụ về trang web dùng Bootstrap để hiển thị trên nhiều thiết bị.

Trang tự động đưa các cột theo chiều dọc khi thay đổi kích thước cửa sổ

Bài trước: Layout trong HTML

Bài sau: Phần tử mã máy tính trong HTML

• Cách cài đặt Bootstrap trên máy tính
• Các phần tử trích dẫn trong HTML
• Tạo kiểu cách cho HTML với CSS
• Màu sắc trong HTML

Thứ Năm, 16/04/2020 14:09

4,8 ★ 5 👨 14.343

0 Bình luận

Sắp xếp theo

Xóa Đăng nhập để Gửi

Bạn nên đọc

• Sống sót kỳ diệu sau khi rơi tự do từ độ cao hơn 5000 mét
• iPhone 6 có chế độ sử dụng một tay
• Top 10 địa điểm du lịch Đà Lạt đẹp và hấp dẫn
• Xperia X2 màu bạc lịch lãm

HTML

• Thẻ HTML
• Thẻ HTML
• Thẻ HTML
• Thẻ HTML
• Thẻ HTML
• Những ví dụ về HTML

Xem thêm

HTML

• HTML cơ bản
  • Giới thiệu về HTML
  • Công cụ soạn thảo HTML
  • Các ví dụ cơ bản về HTML
  • Các phần tử trong HTML
  • Các thuộc tính trong HTML
  • Tiêu đề trong HTML
  • Đoạn văn trong HTML
  • Thuộc tính Style trong HTML
  • Định dạng văn bản trong HTML
  • Các phần tử trích dẫn trong HTML
  • Thẻ chú thích trong HTML
  • Màu sắc trong HTML
  • Cách chèn khoảng trống trong HTML
  • Tạo kiểu cách cho HTML với CSS
  • Các đường dẫn trong HTML
  • Hình ảnh trong HTML
  • Bảng biểu trong HTML
  • Danh sách trong HTML
  • Phần tử khối và nội dòng trong HTML
  • Thuộc tính class trong HTML
  • Thuộc tính id trong HTML
  • Iframe trong HTML
  • JavaScript trong HTML
  • Đường dẫn tập tin trong HTML
  • Phần tử Head trong HTML
  • Layout trong HTML
  • Responsive trong HTML
  • Phần tử mã máy tính trong HTML
  • HTML Entities - Ký tự thực thể trong HTML
  • Symbol - Biểu tượng trong HTML
  • Mã hóa kí tự trong HTML (Charset)
  • Uniform Resource Locators - URL trong HTML
  • HTML và XHTML
  • Thuộc tính Global trong HTML
• Form trong HTML
  • Form trong HTML
  • Các phần tử của Form trong HTML
  • Các loại dữ liệu đầu vào của phần tử input trong HTML
  • Các thuộc tính của phần tử input trong HTML
• HTML5
  • Giới thiệu về HTML5
  • Hỗ trợ HTML5 trên các trình duyệt
  • Các phần tử mới trong HTML5
  • Semantic Element (Yếu tố ngữ nghĩa) trong HTML5
  • Cách chuyển từ HTML4 sang HTML5
  • Định dạng chuẩn và quy ước viết code
• Đồ họa trong HTML
  • Phần tử Canvas
  • Phần tử SVG
• Media trong HTML
  • Định dạng Media
  • Thẻ Video
  • Plug-in
  • Video YouTube
• API trong HTML
  • Geolocation API
  • Drag & Drop API
  • Web Storage API
  • Web Workers API
  • SSE API
• Ví dụ về HTML
• Tham chiếu HTML
  • Tham chiếu phần tử HTML
  • Hỗ trợ trình duyệt
  • Thuộc tính sự kiện
  • Mã màu
  • Canvas
  • HTML Audio/Video DOM
  • Loại tài liệu HTML
  • Mã hóa URL
  • Mã ngôn ngữ
  • Thông báo trạng thái HTTP
  • Tham chiếu mã quốc gia
• Thẻ HTML
  • Khai báo
  • Thẻ
  • Thẻ
  • Thẻ
  • Thẻ
  • Thẻ
  • Thẻ
  • Thẻ
  • Thẻ
  • Thẻ
  • Thẻ
  • Thẻ
  • Thẻ

  • Thẻ
  • Thẻ
    
  • Thẻ
  • Thẻ