Responsive là kỹ thuật viết giao diện trang web để có thể hiển thị tốt trên các loại thiết bị hiển thị khác nhau. VD: Màn hình laptop, máy tính bảng, máy in, điện thoại, tivi…
Đặc trưng chủ yếu là dùng css để nhận diện thiết bị, không còn như trước đây khi muốn viết giao diện cho mobile thì phải viết sang một tên miền riêng mà chúng ta sẽ chỉ viết 1 lần code giao diện.
Dưới dây là 1 ví dụ demo đơn giản, khi bạn thay đổi kích thước cửa sổ màn hình tương đương việc dùng các thiết bị khác nhau thì màu sắc của thiết bị sẽ thay đổi theo.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style type="text/css">
/*Phần mặc định chung */
.demo {
padding: 20px;
color: white;
background-color: #ccc;
/*Code background này sẽ không hiển thị*/
}
/* phần dành riêng cho từng loại thiết bị: Các thiết bị sẽ được lọc từ bước 1 -> 5
Theo thứ tự này là hướng từ mobile đến máy tính.
*/
/*1. Dành cho điện thoại: Các thiết bị chiều rộng nhỏ hơn 480px*/
@media only screen and (max-width: 480px) {
.demo {background: red;}
}
/*2. Thiết bị máy tính bảng hoặc màn hình điện thoại xoay ngang: Màn hình to hơn 480px, trường hợp này sẽ bao gồm tất cả các màn hình to hơn 480px, kể cả tivi, nhưng khi xuống đến dòng code bên dưới thì đã bị lọc bởi giới hạn 768px nên trong khu vực này chỉ có các loại màn hình từ 480px đến 768px là có tác dụng, vượt quá 768 sẽ rơi vào tình huống số 3 có tác dụng*/
@media only screen and (min-width: 480px) {
.demo {background: green;}
}
/* 3. Máy tính bảng xoay ngang hoặc màn hình máy tính bàn (loại màn vuông) giới hạn chiều rộng từ 768 đến 1000px */
@media only screen and (min-width: 768px) {
.demo {background: blue;}
}
/* 4. Màn hình Laptop từ 1000 đến 1200px*/
@media only screen and (min-width: 1000px) {
.demo {background: orange;}
}
/* 5. Phần này to hơn màn hình laptop: vd loại màn 21inch trở lên, màn tivi...., nhỏ nhất là 1200*/
@media only screen and (min-width: 1200px) {
.demo {background: gray;}
}
</style>
</head>
<body>
<h2 class="demo">Co kéo chiều rộng màn hình để thấy rõ hiệu ứng của màu nền </h2>
</body>
</html>Tại các vị trí chọn media, bạn có thể viết css bất kỳ giống như ở bên ngoài. Tùy theo mục đích mà bạn viết những thứ gì trong đó. Nhưng thứ tự lựa chọn media thì bạn không nên thay đổi.