Thiết kế web đáp ứng là gì?
Thiết kế web đáp ứng làm cho 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).
Thiết kế web đáp ứng là về cách sử dụng HTML và CSS để 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:
Thiết lập Viewport
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Thao tác này sẽ đặt chế độ xem trang của bạn, hướng dẫn của trình duyệt về cách kiểm soát kích thước và quy mô trang.
Theo mình nghĩ các bạn nên sử dụng bootstrap cho web vì nó dễ sử dụng:
<!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>
<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ác giả: Minh Trung
