TVD Media
Trong thời đại các thiết bị di động ngày càng đa dạng, kỹ năng Responsive Web đang trở nên quan trọng hơn bao giờ hết trong lập trình web. Để hiểu rõ hơn về khái niệm, vai trò và cách hiển thị Responsive CSS trên website, hãy tham khảo bài viết sau từ TVD Media.
Responsive là gì?
Responsive là một thuật ngữ để chỉ một website có khả năng hiển thị tốt trên mọi kích thước màn hình của trình duyệt. Nếu giao diện website được đặt cố định ở chiều rộng 800px, nó sẽ không hiển thị đầy đủ trên các trình duyệt di động với chiều ngang chỉ từ 320px – 420px. Chuyển giá trị chiều rộng từ tuyệt đối (800px) sang tương đối (%) có thể giải quyết vấn đề này, nhưng nếu website có nhiều cột, người dùng di động sẽ khó nhìn thấy chi tiết mà không cần phóng to.
Responsive là gì?
Responsive giải quyết vấn đề này bằng cách cho phép giao diện thay đổi tùy theo kích thước màn hình. Bằng cách viết CSS để trình duyệt hiểu và thực thi trên các kích thước trình duyệt nhất định, ví dụ như áp dụng một đoạn CSS chỉ cho màn hình có chiều rộng tối đa 320px, chúng ta có thể tùy chỉnh giao diện cho phù hợp với từng thiết bị. Điều này làm cho Responsive trở thành một kỹ thuật thiết kế từ phía client-side, không cần gửi truy vấn đến máy chủ (server-side).
Các bước áp dụng Responsive lên giao diện website
Để làm cho website của bạn trở thành Responsive, cần thực hiện hai bước sau:
Bước 1. Khai báo meta viewport
Trước tiên, hãy đặt thẻ meta viewport vào cặp thẻ <head> trong mã HTML của website.
<meta name="viewport" content="width=device-width, initial-scale=1">
Thẻ meta viewport thiết lập cho trình duyệt hiển thị trang web phù hợp với kích thước màn hình của thiết bị. Ví dụ trên có nghĩa là bạn đang yêu cầu trình duyệt hiển thị trang web với chiều rộng tương ứng với chiều rộng của thiết bị (device-width) và không cho phép người dùng phóng to (được thiết lập bởi initial-scale với giá trị là 1). Đây là thẻ mình khuyến khích sử dụng cho tất cả các dự án Responsive.
Các giá trị của thẻ meta viewport:
- width: Thiết lập chiều rộng của viewport.
- device-width: Chiều rộng cố định của thiết bị.
- height: Thiết lập chiều cao của viewport.
- device-height: Là chiều cao cố định.
- initial-scale: Thiết lập mức phóng to ban đầu, giá trị là 1 nghĩa là không phóng to, và khi giá trị này được thiết lập, người dùng không thể phóng to thêm.
- minimum-scale: Mức phóng to tối thiểu của một thiết bị so với trình duyệt.
- maximum-scale: Chỉ mức phóng to tối đa của thiết bị so với trình duyệt.
- user-scalable: Cho phép người dùng phóng to, giá trị là yes hoặc no.
Bước 2. Code CSS cho chiều rộng của thiết bị
Ở bước này, chúng ta sẽ viết CSS tương ứng cho từng mức chiều rộng của thiết bị, thường sử dụng đơn vị pixel. Để làm điều này, chúng ta sẽ sử dụng thẻ truy vấn @media trong CSS3 như sau:
Đoạn code có nghĩa là website của bạn sẽ có nền màu trắng mặc định. Khi chiều rộng của trình duyệt nhỏ hơn hoặc bằng 320px, nền sẽ chuyển thành màu xám (#e7e7e7).
Giải thích:
@media all and (max-width: 320px): Thiết lập breakpoint cho tất cả các thiết bị có chiều rộng tối đa là 320px. Điều này phù hợp với màn hình của iPhone.
CSS bên trong @media query: Các đoạn CSS này sẽ được thực thi khi chiều rộng trình duyệt nằm trong khoảng từ 0px đến 320px.
Làm sao để kiểm tra Responsive?
Có nhiều cách để bạn kiểm tra Responsive:
Sử dụng Công cụ DevTools của Trình Duyệt
- Mở DevTools:
- Trên Chrome: Nhấn F12 hoặc Ctrl+Shift+I (Windows/Linux), Cmd+Option+I (Mac).
- Trên Firefox: Nhấn F12 hoặc Ctrl+Shift+I (Windows/Linux), Cmd+Option+I (Mac).
- Chuyển sang chế độ Responsive:
- Trong DevTools, tìm và chọn biểu tượng “Toggle Device Toolbar” (thường có biểu tượng điện thoại và máy tính bảng) hoặc nhấn Ctrl+Shift+M (Windows/Linux), Cmd+Shift+M (Mac).
- Bạn có thể chọn các thiết bị khác nhau từ danh sách thả xuống hoặc tùy chỉnh kích thước màn hình để kiểm tra cách website hiển thị.
- Kiểm tra các breakpoints:
- Thay đổi kích thước của viewport để xem cách các breakpoints được áp dụng và kiểm tra xem các yếu tố trên trang có thay đổi đúng cách không.
Sử dụng công cụ online
Có nhiều công cụ trực tuyến giúp bạn kiểm tra tính năng Responsive của website mà không cần mở DevTools như:
- Responsive Design Checker: responsivedesignchecker.com
- Am I Responsive: ami.responsivedesign.is
Các kích thước màn hình thiết bị
Khi viết CSS cho giao diện Responsive, điều quan trọng nhất là bạn phải nắm rõ kích thước màn hình của các thiết bị thông dụng để đảm bảo website hoạt động tốt trên nhiều loại thiết bị. Dưới đây là các breakpoint CSS thông dụng:
- max-width: 320px (điện thoại di động)
- max-width: 480px (điện thoại di động)
- max-width: 600px (máy tính bảng)
- max-width: 768px (máy tính bảng)
- max-width: 800px (máy tính bảng)
- max-width: 1024px (máy tính bảng)
- min-width: 1025px (desktop thông thường)
Ví dụ về cấu trúc CSS cho giao diện Responsive:
Với các breakpoint trên, bạn có thể dễ dàng viết CSS để điều chỉnh giao diện website phù hợp với các kích thước màn hình khác nhau, đảm bảo tính thẩm mỹ và khả năng sử dụng trên mọi thiết bị.
Mobile-First trong thiết kế Responsive
Khi làm giao diện Responsive, bạn cần biết về khái niệm Mobile-First, giúp quy trình thiết kế nhanh hơn. Mobile-First là một quy trình thiết kế bắt đầu từ giao diện điện thoại và sau đó mở rộng ra các thiết bị khác như máy tính bảng và desktop.
Đặc điểm của Mobile-First
Sử dụng media features min-width thay vì max-width.
Ví dụ:
Điều này có nghĩa là các thiết bị có chiều rộng tối thiểu là 320px sẽ áp dụng CSS này, bao gồm cả máy tính bảng và desktop.
Cấu trúc CSS Mobile-First
/* Dành cho điện thoại */
@media all and (min-width: 320px) {…}
/* Dành cho máy tính bảng chiều dọc */
@media all and (min-width: 600px) {…}
/* Dành cho máy tính bảng chiều ngang */
@media all and (min-width: 1024px) {…}
/* Dành cho màn hình desktop */
@media all and (min-width: 1280px) {…}
Lý do nên sử dụng Mobile-First
- Tập trung vào giao diện điện thoại, xu hướng sử dụng điện thoại ngày càng tăng.
- Tránh viết lại CSS, CSS cho điện thoại có thể tái sử dụng trên desktop.
- Dễ dàng có thể triển khai, quản lý và nâng cấp.
- Tránh lỗi hiển thị trên điện thoại do tùy biến từ CSS desktop.
Lưu ý khi viết CSS Responsive
- Ưu tiên sử dụng đơn vị tương đối như phần trăm (%) thay vì px để thiết kế linh hoạt và dễ dàng điều chỉnh trên nhiều thiết bị.
- Sử dụng max-width thay cho width để tránh việc cố định chiều rộng của các phần tử, giúp chúng thích ứng tốt hơn với các kích thước màn hình khác nhau.
- Sử dụng display: none để ẩn các thành phần trên các thiết bị không cần thiết và display: block để hiển thị chúng trên các thiết bị mong muốn.
- Nếu cần đè các quy tắc CSS, bạn có thể sử dụng tùy chọn !important. Tuy nhiên, hãy sử dụng nó một cách cẩn thận để tránh làm rối các quy tắc CSS.
Ví dụ:
Vừa rồi là những chia sẻ về Responsive CSS cơ bản. Khi bạn đã nắm vững khái niệm, cách làm giao diện Responsive CSS sẽ giúp website của bạn được tối ưu hóa cho mọi thiết bị, từ máy tính để bàn đến điện thoại di động. Điều này không chỉ cải thiện trải nghiệm người dùng mà còn tăng khả năng tiếp cận và SEO của trang web.
