Giao diện Responsive
Giao diện Responsive
Giao diện Responsive chính là tùy biến sao cho giao diện trang hiển thị phù hợp với mọi đối tượng người dùng hay thiết bị hiển thị HTML, Kỹ thuật thường được sử dụng HTML, CSS và javascript để tự động thay đổi kích thước, ẩn, thu nhỏ hoặc phóng to, một trang web, để trang web trông đẹp mắt 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).
Việc đầu tiên là thiết lập khung nhìn cho thiết bị:
Cú pháp:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Tiếp theo là một vài ví dụ:
Ví dụ tùy chỉnh kích thước anh:
<img src="img.jpg" style="max-width:100%;height:auto;">
Ví dụ tùy chỉnh kích thước ảnh theo kích thước của thiết bị:
<picture>
<source srcset="imgsmall.jpg" media="(max-width: 600px)">
<source srcset="img-deff.jpg" media="(max-width: 1500px)">
<source srcset="img.jpg">
<img src="img-deff.jpg" alt="Flowers">
</picture>
Các framework được sủ dụng chỉnh giao diện trong Responsive:
1. Bootstrap
Bootsatrap là một framework miễn phí, nó sử dụng HTML, css và jquery để thực hiện giao diện tối ưu cho Responsive:
Ví dụ:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="jumbotron">
<h1>My First Bootstrap Page</h1>
</div>
<div class="row">
<div class="col-sm-4">
...
</div>
<div class="col-sm-4">
...
</div>
<div class="col-sm-4">
...
</div>
</div>
</div>
</body>
</html>
Để tìm hiểu sâu về Bootstrap bạn hãy học qua khóa học bootstrap tại trang để biết chi tiết cách dùng của nó.
- Viết bởi bxh.cpu@gmail.com
- 13/09/2018
- 100
- HTML