Responsive

Có thể bạn sợ khoảnh khắc này nhưng đã đến lúc làm cho trang web của chúng ta có thể đáp ứng tốt!

Bây giờ chúng ta cần tái tạo mọi thứ chúng ta đã làm cho phiên bản máy tính để bàn nhưng cho di động!

Đùa thôi 🤭, chúng ta sẽ sử dụng vài kỹ thuật để đảm bảo cảnh 3D của chúng ta trông đẹp trên di động.

Tôi muốn nhấn mạnh rằng không có một giải pháp hoàn hảo nào để làm cho một cảnh 3D có thể đáp ứng tốt. Điều này phụ thuộc vào nhiều yếu tố:

• Độ phức tạp của cảnh
• Số lượng phần tử
• Hiệu suất
• Những gì bạn muốn đạt được

Đối với phần CSS, chúng ta sẽ dễ dàng làm cho trang web của mình trở nên rất đáp ứng với media queries.

useMobile

Chúng ta sẽ sử dụng hai kỹ thuật để làm cho cảnh 3D đáp ứng tốt:

• Thay đổi vị trí và kích thước cơ bản của các phần tử dựa trên chiều rộng có sẵn của chúng ta. Sau một ngưỡng nhất định, chúng ta sẽ chuyển sang phiên bản dành cho di động.
• Tinh chỉnh vị trí và kích thước của các phần tử dựa trên scaleFactor. Cảnh của chúng ta trông hoàn hảo trên màn hình 1980px nhưng còn màn hình 1600px thì sao? Chúng ta sẽ sử dụng scaleFactor để điều chỉnh vị trí và kích thước của các phần tử để giữ nguyên giao diện và cảm nhận.

Hãy tạo một hook useMobile trong thư mục src/hooks để xử lý cả hai kỹ thuật:

Copy
import { useState } from "react";

const REFERENCE_WIDTH = 1920;
const MOBILE_THRESHOLD = 990;

export const useMobile = () => {
  const [scaleFactor, setScaleFactor] = useState(
    window.innerWidth / REFERENCE_WIDTH
  );
  const [isMobile, setIsMobile] = useState(
    window.innerWidth <= MOBILE_THRESHOLD
  );
  return {
    scaleFactor,
    isMobile,
  };
};

Chúng ta đang sử dụng hook useState để lưu trữ các giá trị scaleFactor và isMobile. Điều này sẽ buộc phải render lại khi các giá trị thay đổi.

Chúng ta sử dụng hai hằng số để xác định chiều rộng hoàn hảo mà chúng ta đã sử dụng để định vị các phần tử và ngưỡng dành cho di động (khi chúng ta chuyển sang phiên bản dành cho di động).

Tôi đã chọn không sử dụng config cho những biến số này để làm cho hook này có thể tái sử dụng trong các dự án khác.