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].

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ử

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.

* {
 box-sizing:border-box;
}

.left {
 background-color:#2196F3;
 padding:20px;
 float:left;
 width: 20%; /* Độ rộng mặc định là 20% */
}

.main {
background-color:#f1f1f1;
padding:20px;
 float: left;
 width: 60%; /* Độ rộng mặc định là 60% */
}

.right {
 background-color:#4CAF50;
 padding:20px;
 float:left;
 width:20%; /* The width is 20%, by default */
}

/* Dùng Media Query để tạo điểm tách tại kích thước 800px: */
@media screen and [max-width: 800px] {
.left, .main, .right {
  width: 100%; /* Độ rộng là 100% khi viewport là 800px hoặc nhỏ hơn */
 }
}




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

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ị.

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