Ở bài viết này tôi sẽ viết về chủ đề giao diện Responsive trong HTML. Đầu tiên bạn cần phải biết Responsive là gì?
1. Responsive là gì?
Responsive là thuật ngữ dùng để chỉ những website có thiết kế tương thích với nhiều thiết bị, nhiều kích cỡ trình duyệt. Trước đây, nếu muốn website có thể xem được trên các thiết bị di động, máy tính bảng,… các nhà thiết kế phải sử dụng nhiều phiên bản giao diện riêng biệt. Điều này làm cho website trở nên cồng kềnh và rất vất vả khi muốn nâng cấp hoặc thay đổi giao diện.
2. Responsive Web Design là gì?
Responsive Web Design viết tắt là RWD
Responsive Web Design giúp trang web của bạn trông đẹp trên tất cả các thiết bị (máy tính để bàn, máy tính bảng và điện thoại).
Responsive Web Design là sử dụng CSS và HTML để thay đổi kích thước, ẩn, co lại, phóng to hoặc di chuyển nội dung để làm cho nó trông đẹp trên bất kỳ màn hình nào.
3. Giao diện Responsive trong HTML
Giao diện Responsive trong HTML thì ở trong cặp thẻ <head></head> bắt buộc phải có:
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
Cái này tôi đã viết kỹ ở bài [Học HTML] Các thẻ nằm trong phần head mục Thiết lập Viewport ở đây tôi không viết lại.
Ở mục này để các bạn dễ hiểu tôi sẽ ví dụ về một giao diện Responsive đơn giản như code dưới
<!DOCTYPE html>
<html lang="vi">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.binhnet {
float: left;
margin: 5px;
padding: 15px;
width: 250px;
height: 250px;
border: 1px solid black;
}
</style>
</head>
<body>
<h1>Responsive Web Design Demo</h1>
<h2>Thay đổi kích cỡ của trình duyệt để thấy tác dụng của responsive!</h2>
<div class="binhnet">
<h2>HTML</h2>
<p>Đây là series đầu tiên về lập trình web của tôi.Đây là series đầu tiên về lập trình web của tôi.Đây là series đầu tiên về lập trình web của tôi.Đây là series đầu tiên về lập trình web của tôi.Đây là series đầu tiên về lập trình web của tôi.</p>
</div>
<div class="binhnet">
<h2>CSS</h2>
<p>Đây là series thứ hai về lập trình web của tôi.Đây là series thứ hai về lập trình web của tôi.Đây là series thứ hai về lập trình web của tôi.Đây là series thứ hai về lập trình web của tôi.Đây là series thứ hai về lập trình web của tôi.</p>
</div>
<div class="binhnet">
<h2>JavaScript</h2>
<p>Đây là series thứ ba về lập trình web của tôi.Đây là series thứ ba về lập trình web của tôi.Đây là series thứ ba về lập trình web của tôi.Đây là series thứ ba về lập trình web của tôi.Đây là series thứ ba về lập trình web của tôi.</p>
</div>
<div class="binhnet">
<h2>PHP</h2>
<p>Đây là series thứ tư về lập trình web của tôi.Đây là series thứ tư về lập trình web của tôi.Đây là series thứ tư về lập trình web của tôi.Đây là series thứ tư về lập trình web của tôi.Đây là series thứ tư về lập trình web của tôi.</p>
</div>
</body>
</html>
+ Nếu bạn xem trên máy tính để bàn thì màn hình sẽ hiển thị như sau:
+ Nếu bạn xem trên máy tính bảng thì màn hình sẽ hiển thị như sau:
+ Nếu bạn xem trên điện thoại thì màn hình sẽ hiển thị như sau:
4. Sử dụng các thư viện có sẵn
Nếu bạn muốn tự thiết kế website responsive thì hiện nay có các thư viện phổ biến như W3.CSS hoặc Bootstrap. Ngoài ra còn có các thư viện khác như Foundation, Skeleton, HTML5 Boilerplate …
5. Lời cuối bài
Đến đây là kết thúc bài viết về [Học HTML] Giao diện Responsive trong HTML. Ở bài sau tôi sẽ viết về [Học HTML] Các thẻ liên quan đến mã máy tính (Computer Code).
The post [HTML bài 28] Giao diện Responsive trong HTML appeared first on Học online.
from WordPress http://ift.tt/2iLCzgK
via IFTTT
Không có nhận xét nào:
Đăng nhận xét