Thiết kế trang web chạy trên nhiều thiết bị (responsive web design) bằng HTML

Responsive Web Design - Thiết kế web có độ phản hồi cao là gì? 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 ...

Responsive Web Design - Thiết kế web có độ phản hồi cao là gì?

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ử <meta>.

<meta name="viewport" content="awidth=device-awidth, initial-scale=1.0">

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
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 awidth

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

<img src="img_girl.jpg" style="awidth:100%;">

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

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

Nếu dùng đặc tính max-awidth 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.

<img src="img_girl.jpg" style="max-awidth:100%;height:auto;">

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

Phẩn tử <picture> 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.

<picture>
<source srcset="img_smallflower.jpg" media="(max-awidth: 600px)">
<source srcset="img_flowers.jpg" media="(max-awidth: 1500px)">
<source srcset="flowers.jpg">
<img src="img_smallflower.jpg" alt="Flowers">
</picture>

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 awidth” (độ 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.

<h1 style="font-size:10vw">Xin chào</h1>

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.

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="awidth=device-awidth, initial-scale=1.0">
<style>
* {
 box-sizing:border-box;
}

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

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

.right {
 background-color:#4CAF50;
 padding:20px;
 float:left;
 awidth:20%; /* The awidth 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-awidth: 800px) {
.left, .main, .right {
  awidth: 100%; /* Độ rộng là 100% khi viewport là 800px hoặc nhỏ hơn */
 }
}
</style>
</head>
<body>

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

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

<div class="left">
 <p>Danh mục bên trái</p>
</div>

<div class="main">
 <p>Nội dung chính</p>
</div>

<div class="right">
 <p>Danh mục bên phải</p>
</div>

</body>
</html>

Kích thước cửa sổ trình duyệt lớn
Kích thước cửa sổ trình duyệt nhỏ
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ị.

Cửa sổ kích thước lớn
Cửa sổ kích thước lớn
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

Bài liên quan

Cách phát hiện thiết bị người dùng mobile bằng PHP

Hiện nay, ngày càng có nhiều người sử dụng các thiệt bị di động, đặc biệt là điện thoại smarphone để lướt web, xem phim. Chính vì thế mà khi thiết kế web, chúng ta cần phải để ý đến việc hiển thị nội dung web đến các trình duyệt trên các thiết bị di động này. Chúng ta phải thiết kế sao cho khách ...

Trịnh Tiến Mạnh viết 17:55 ngày 04/10/2018

Tôi đã thiết kế trang web học C++ phục vụ hàng chục nghìn truy cập mỗi tháng với $0.0002 thế nào

Nếu bạn là thành viên của Dạy Nhau Học (DNH) thì các bạn có thể đã biết đến khóa học của anh Đạt admin (@ltd) Khóa học này (có phí) gồm các video được đăng trên Udemy kèm với đó là trang web đăng tải các bài học miễn phí . Trong bài viết này mình sẽ giới thiệu các ...

Hoàng Hải Đăng viết 15:46 ngày 01/10/2018

5 plug-in giúp đa ngôn ngữ hóa trang web tạo bằng Wordpress

Số lượng người nước ngoài ghé thăm Nhật Bản ngày càng gia tăng, theo phát biểu của Cục quản lý du lịch Nhật Bản vào ngày 18/7/2018 thì lượng khách quốc tế từ tháng 1 ~ 6/2018 đã tăng 15,6% so với cùng kì năm ngoái. Như các bạn cũng biết Nhật Bản là quốc gia đăng cai tổ chức Olympic Tokyo vào ...

Hoàng Hải Đăng viết 15:05 ngày 21/09/2018

Nguyên tắc thiết kế trang web

Google và AnswerLab đã tiến hành một nghiên cứu chuyên sâu nghiên cứu kiểm tra làm thế nào một loạt người dùng tương tác với một tập hợp đa dạng của các trang web điện thoại di động. Mục tiêu, để trả lời câu hỏi: điều gì làm cho một trang web di động tốt? Tham khảo ...

Trịnh Tiến Mạnh viết 16:49 ngày 04/09/2018

Thiết kế trang web chạy trên nhiều thiết bị (responsive web design) bằng HTML

Responsive Web Design - Thiết kế web có độ phản hồi cao là gì? 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 ...

Hoàng Hải Đăng viết 11:29 ngày 22/08/2018
0