Bài 21: Thiết kế Web Responsive trong HTML
Mục đích làm cho trang web của bạn sẽ ưu nhìn, dễ sử dụng và không phụ thuộc vào thiết bị hiển thị nó.
Thiết kế web Responsible là gì?
Thiết kế Web Responsive để làm trang web của bạn sẽ hiển thị tốt trên tất cả các thiết bị (máy tính, máy tính bảng và điện thoại) vì mỗi thiết bị có kích thước màn hình và độ phân giải khác nhau.
Thiết kế Web Responsive sử dụng CSS và HTML để thay đổi kích thước, ẩn, thu nhỏ, phóng to và di chuyển nội dụng để có thể hiển thị tốt trên bất kỳ màn hình hiển thị nào:
Tạo thiết kế Web Responsive riêng của bạn
Tự thiết kế một Responsie:
Ví dụ 1
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<style>
.city {
float: left;
margin: 5px;
padding: 15px;
width: 300px;
height: 300px;
border: 1px solid black;
}
</style>
</head>
<body><h1>Demo thiết kế Web Responsive</h1>
<div class="city">
<h2>Hà Nội</h2>
<p>Hà Nội là thủ đô của nước và cũng là kinh đô của rất nhiều vương triều Việt cổ. Lịch sử Hà Nội gắn liền với sự thăng trầm của lịch sử Việt Nam qua các thời kì.</p>
<p>Hiện nay, Hà Nội là thành phố lớn nhất Việt Nam về diện tích, đồng thời cũng là địa phương đứng thứ nhì về dân số.</p>
</div>
</div>
<div class="city">
<h2>Đà Nẵng</h2>
<p>Đà Nẵng là một thành phố thuộc trung ương từ năm 1997, nằm trong vùng Nam Trung Bộ, Việt Nam.</p>
<p>Nói đến Đà Nẵng là du khách có thể hình dung ngay rằng đó là một thành phố tuyệt đẹp bên sông Hàn, bên bờ biển Đông với những nét quyến rũ chưa từng có ở các đô thị biển khác...</p>
</div>
<div class="city">
<h2>Hồ Chí Minh</h2>
<p>Hồ Chí Minh là thành phố lớn nhất Việt Nam xét về quy mô dân số và mức độ đô thị hóa, đồng thời cũng là đầu tàu kinh tế, là một trong những trung tâm văn hóa, giáo dục quan trọng của cả nước.</p>
<p>Hiện nay, thành phố Hồ Chí Minh là thành phố trực thuộc Trung ương cùng với thủ đô Hà Nội là đô thị loại đặc biệt của Việt Nam.</p>
</div>
</body>
</html>
Sử dụng style W3.CSS
Một cách khác để thiết kế một Responsive là sử dụng một style sheet Responsie, ví dụ như W3.CSS
W3.CSS được xây dựng để dễ dàng phát triển các site có giao diện thân thiện với bất kỳ kích thước màn hình nào như máy tính cá nhân, laptop, tablet hay điện thoại:
Ví dụ 2
<!DOCTYPE html>
<html>
<meta charset = "utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
<body>
<div class="w3-container w3-orange">
<h1>Demo sử dụng W3.CSS</h1>
<p>Thay đổi kích thước của trang Responsive này!</p>
</div>
<div class="w3-row-padding">
<div class="w3-third">
<h2>Hà Nội</h2>
<p>Hà Nội là thủ đô của nước và cũng là kinh đô của rất nhiều vương triều Việt cổ. Lịch sử Hà Nội gắn liền với sự thăng trầm của lịch sử Việt Nam qua các thời kì.</p>
<p>Hiện nay, Hà Nội là thành phố lớn nhất Việt Nam về diện tích, đồng thời cũng là địa phương đứng thứ nhì về dân số.</p>
</div>
<div class="w3-third">
<h2>Đà Nẵng</h2>
<p>Đà Nẵng là một thành phố thuộc trung ương từ năm 1997, nằm trong vùng Nam Trung Bộ, Việt Nam.</p>
<p>Nói đến Đà Nẵng là du khách có thể hình dung ngay rằng đó là một thành phố tuyệt đẹp bên sông Hàn, bên bờ biển Đông với những nét quyến rũ chưa từng có ở các đô thị biển khác...</p>
</div>
<div class="w3-third">
<h2>Hồ Chí Minh</h2>
<p>Hồ Chí Minh là thành phố lớn nhất Việt Nam xét về quy mô dân số và mức độ đô thị hóa, đồng thời cũng là đầu tàu kinh tế, là một trong những trung tâm văn hóa, giáo dục quan trọng của cả nước.</p>
<p>Hiện nay, thành phố Hồ Chí Minh là thành phố trực thuộc Trung ương cùng với thủ đô Hà Nội là đô thị loại đặc biệt của Việt Nam.</p>
</div>
</div>
</body>
</html>
Để biết thêm về W3.CSS, đọc nộ dung này tại W3.CSS Tutorial.
