Responsive là kĩ thuật tối ưu hoá giao diện website cho phù hợp với nhiều màn hình và kích thước khác nhau. Làm cho giao diện trang web phản hồi tốt nhất với sự thay đổi của kích thước màn hình, từ desktop đến tablet đến phone.
Có 2 xu hướng responsive chính là mobile-first và desktop-first
Vậy media query là gì ?
Media query là một cụm từ trong css để áp dụng kiểu css cho các thiết bị và màn hình khác nhau.
Cú pháp:
@media (điều kiện) {
/* Kiểu CSS được áp dụng khi điều kiện đúng */
}
Ví dụ:
body {
font-size: 16px;
}
@media (max-width: 767px) {
body {
font-size: 14px;
}
}
Trong ví dụ trên ta có thẻ body có font-size là 16px và khi màn hình nhỏ hơn hoặc bằng 767px (max-width: 767px) thì font-size của body sẽ thay đổi thành 14px.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hướng dẫn responsive trong css toàn tập</title>
<style>
p {
font-size: 10px;
}
@media (min-width: 576px) {
p {
font-size: 12px;
}
}
@media (min-width: 768px) {
p {
font-size: 14px;
}
}
@media (min-width: 992px) {
p {
font-size: 16px;
}
}
</style>
</head>
<body>
<p>Thẻ p có font-size ban đầu là 10px</p>
</body>
</html>
Trong ví dụ trên ta thực hiện thay đổi font-size cho thẻ p để phù hợp với 4 màn hình có kích thước khác nhau. Vì ta đang thiết kế theo mobile-first nên sẽ set font-size là 10px cho phù hợp với màn hình nhỏ nhất, giá trị của font-size chúng ta có thể tự đặt cho cảm thấy phù hơp hoặc dựa theo thiết kế của designer (vào dự án thực tế thì designer sẽ thiết kế riêng cho từng màn hình).
Tiếp theo ta thay đổi font-size thẻ p cho màn hình lớn hơn 1 tí là 576px bằng 12px, nghĩa là màn hình nào lớn hơn hoặc bằng 576px thì sẽ áp dụng font-size 12px.
Tiếp theo nữa ta thay đổi font-size thẻ p cho màn hình lớn hơn 1 tí nữa là 768px bằng 14px, nghĩa là màn hình nào lớn hơn hoặc bằng 768px thì sẽ áp dụng font-size 14px.
Cuối cùng ta thay đổi font-size thẻ p cho màn hình lớn hơn 992px bằng 16px, nghĩa là màn hình nào lớn hơn hoặc bằng 992px thì sẽ áp dụng font-size 16px.
Vậy là chúng ta đã thay đổi font-size cho thẻ p trên nhiều màn hình khác nhau, làm cho giao diện website thân thiện với người dùng. Với xu hướng người dùng sử dụng điện thoại di động ngày càng nhiều thì thiết kế mobile-first đang là xu hướng.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hướng dẫn responsive trong css toàn tập</title>
<style>
p {
font-size: 16px;
}
@media (max-width: 576px) {
p {
font-size: 10px;
}
}
@media (max-width: 768px) {
p {
font-size: 12px;
}
}
@media (max-width: 992px) {
p {
font-size: 14px;
}
}
</style>
</head>
<body>
<p>Thẻ p có font-size ban đầu là 16px</p>
</body>
</html>
Trong ví dụ trên ta thực hiện thay đổi font-size cho thẻ p để phù hợp với 4 màn hình có kích thước khác nhau. Vì ta đang thiết kế theo desktop-first nên sẽ set font-size là 16px cho phù hợp với màn hình lớn nhất.
Tiếp theo ta thay đổi font-size thẻ p cho màn hình nhỏ hơn 1 tí là 992px bằng 14px, nghĩa là màn hình nào nhỏ hơn hoặc bằng 992px thì sẽ áp dụng font-size 14px.
Tiếp theo nữa ta thay đổi font-size thẻ p cho màn hình nhỏ hơn 1 tí nữa là 768px bằng 12px, nghĩa là màn hình nào nhỏ hơn hoặc bằng 768px thì sẽ áp dụng font-size 12px.
Cuối cùng ta thay đổi font-size thẻ p cho màn hình nhỏ nhất bằng 10px, nghĩa là màn hình nào nhỏ hơn hoặc bằng 576px thì sẽ áp dụng font-size 10px.
Có rất nhiều kích thước màn hình khác nhau từ thiết bị di động đến desktop nhưng có những kích thước màn hình phổ biến thường dùng là: 414px, 576px, 768px, 992px, 1024px, 1280px
Việc lựa chọn kích thước không nên cứng nhắn mà tuỳ thuộc vào yêu cầu cụ thể của trang web và đối tượng người dùng. Thêm vào đó, sử dụng các đơn vị đo lường như %, rem, em, vw kết hợp để tạo nên trang web tương thích với nhiều màn hình khác nhau.
Tham gia các khoá học nâng cao dưới đây để có những kiến thức chuyên sâu hơn về thiết kế website
