Nhập CSS truy vấn phương tiện

Đây là móc nối truy vấn phương tiện CSS cho React. Nó lắng nghe các kết quả phù hợp với truy vấn phương tiện CSS. Nó cho phép kết xuất các thành phần dựa trên việc truy vấn có khớp hay không

Một số tính năng chính

• ⚛️ Nó có API React đặc trưng
• 🚀 Nó hoạt động hiệu quả, nó quan sát tài liệu để phát hiện khi các truy vấn phương tiện của nó thay đổi, thay vì thăm dò các giá trị theo định kỳ
• 📦 1 kB được nén
• 🤖 Nó hỗ trợ kết xuất phía máy chủ

Bạn nên cung cấp truy vấn phương tiện cho đối số đầu tiên của hook. Chuỗi truy vấn phương tiện có thể là bất kỳ truy vấn phương tiện CSS hợp lệ nào, e. g.

⚠️ Bạn không thể sử dụng 'print' theo giới hạn của trình duyệt, e. g. firefox

Sử dụng trình trợ giúp điểm dừng của MUI

Bạn có thể sử dụng trình trợ giúp điểm dừng của MUI như sau

import { useTheme } from '@mui/material/styles';
import useMediaQuery from '@mui/material/useMediaQuery';

function MyComponent() {
  const theme = useTheme();
  const matches = useMediaQuery(theme.breakpoints.up('sm'));

  return {`theme.breakpoints.up('sm') matches: ${matches}`};
}

Bản sao (hoặc $keyC)

Ngoài ra, bạn có thể sử dụng chức năng gọi lại, chấp nhận chủ đề làm đối số đầu tiên

import useMediaQuery from '@mui/material/useMediaQuery';

function MyComponent() {
  const matches = useMediaQuery((theme) => theme.breakpoints.up('sm'));

  return {`theme.breakpoints.up('sm') matches: ${matches}`};
}

Bản sao (hoặc $keyC)

⚠️ Không có hỗ trợ chủ đề mặc định, bạn phải đưa nó vào nhà cung cấp chủ đề gốc

Sử dụng cú pháp JavaScript

Bạn có thể sử dụng json2mq để tạo chuỗi truy vấn phương tiện từ một đối tượng JavaScript

thử nghiệm

Bạn cần triển khai matchMedia trong môi trường thử nghiệm của mình

Ví dụ,. Bạn nên polyfill nó. Nên sử dụng css-mediaquery để mô phỏng

import mediaQuery from 'css-mediaquery';

function createMatchMedia(width) {
  return (query) => ({
    matches: mediaQuery.match(query, {
      width,
    }),
    addListener: () => {},
    removeListener: () => {},
  });
}

describe('MyTests', () => {
  beforeAll(() => {
    window.matchMedia = createMatchMedia(window.innerWidth);
  });
});

Bản sao (hoặc $keyC)

Kết xuất chỉ phía máy khách

Để thực hiện hydrat hóa phía máy chủ, hook cần kết xuất hai lần. Lần đầu tiên với false, giá trị của máy chủ và lần thứ hai với giá trị đã giải quyết. Chu kỳ kết xuất vượt qua kép này đi kèm với một nhược điểm. nó chậm hơn. Bạn có thể đặt tùy chọn noSsr thành

import useMediaQuery from '@mui/material/useMediaQuery';

function MyComponent() {
  const matches = useMediaQuery((theme) => theme.breakpoints.up('sm'));

  return {`theme.breakpoints.up('sm') matches: ${matches}`};
}

0 nếu bạn chỉ hiển thị phía máy khách

const matches = useMediaQuery('(min-width:600px)', { noSsr: true });

Bản sao (hoặc $keyC)

hoặc nó có thể bật nó trên toàn cầu với chủ đề

const theme = createTheme({
  components: {
    MuiUseMediaQuery: {
      defaultProps: {
        noSsr: true,
      },
    },
  },
});

Bản sao (hoặc $keyC)

Kết xuất phía máy chủ

Trước tiên hãy thử dựa vào các truy vấn phương tiện CSS phía máy khách. Ví dụ, bạn có thể sử dụng

Nếu không có lựa chọn thay thế nào ở trên là một tùy chọn, bạn có thể tiếp tục đọc phần tài liệu này

Trước tiên, bạn cần đoán các đặc điểm của yêu cầu của khách hàng, từ máy chủ. Bạn có sự lựa chọn giữa việc sử dụng

• Đại lý người dùng. Phân tích chuỗi tác nhân người dùng của máy khách để trích xuất thông tin. Nên sử dụng ua-parser-js để phân tích tác nhân người dùng
• gợi ý khách hàng. Đọc các gợi ý mà máy khách đang gửi đến máy chủ. Hãy nhận biết rằng tính năng này là

Cuối cùng, bạn cần cung cấp triển khai matchMedia cho

import useMediaQuery from '@mui/material/useMediaQuery';

function MyComponent() {
  const matches = useMediaQuery((theme) => theme.breakpoints.up('sm'));

  return {`theme.breakpoints.up('sm') matches: ${matches}`};
}

1 với các đặc điểm đã đoán trước đó. Nên sử dụng css-mediaquery để mô phỏng matchMedia

Ví dụ ở phía máy chủ

Đảm bảo rằng bạn cung cấp cùng một triển khai phương tiện khớp tùy chỉnh cho phía máy khách để đảm bảo khớp hydrat hóa

Di chuyển từ import useMediaQuery from '@mui/material/useMediaQuery'; function MyComponent() { const matches = useMediaQuery((theme) => theme.breakpoints.up('sm')); return {`theme.breakpoints.up('sm') matches: ${matches}`}; } 2

Thành phần bậc cao hơn

import useMediaQuery from '@mui/material/useMediaQuery';

function MyComponent() {
  const matches = useMediaQuery((theme) => theme.breakpoints.up('sm'));

  return {`theme.breakpoints.up('sm') matches: ${matches}`};
}

2 chèn chiều rộng màn hình của trang. Bạn có thể tái tạo hành vi tương tự với móc

import useMediaQuery from '@mui/material/useMediaQuery';

function MyComponent() {
  const matches = useMediaQuery((theme) => theme.breakpoints.up('sm'));

  return {`theme.breakpoints.up('sm') matches: ${matches}`};
}

4

API

Tranh luận

1. import useMediaQuery from '@mui/material/useMediaQuery';
   
   function MyComponent() {
     const matches = useMediaQuery((theme) => theme.breakpoints.up('sm'));
   
     return {`theme.breakpoints.up('sm') matches: ${matches}`};
   }
   

   5 (chuỗi. chức năng). Một chuỗi đại diện cho truy vấn phương tiện cần xử lý hoặc hàm gọi lại chấp nhận chủ đề (trong ngữ cảnh) trả về một chuỗi

2. import useMediaQuery from '@mui/material/useMediaQuery';
   
   function MyComponent() {
     const matches = useMediaQuery((theme) => theme.breakpoints.up('sm'));
   
     return {`theme.breakpoints.up('sm') matches: ${matches}`};
   }
   

   6 (đối tượng [tùy chọn])

• import useMediaQuery from '@mui/material/useMediaQuery';
  
  function MyComponent() {
    const matches = useMediaQuery((theme) => theme.breakpoints.up('sm'));
  
    return {`theme.breakpoints.up('sm') matches: ${matches}`};
  }
  

  7 (bool [tùy chọn]). Vì

  import useMediaQuery from '@mui/material/useMediaQuery';
  
  function MyComponent() {
    const matches = useMediaQuery((theme) => theme.breakpoints.up('sm'));
  
    return {`theme.breakpoints.up('sm') matches: ${matches}`};
  }
  

  8 không khả dụng trên máy chủ, chúng tôi sẽ trả lại kết quả khớp mặc định trong lần gắn kết đầu tiên. Giá trị mặc định là false

• import mediaQuery from 'css-mediaquery';
  
  function createMatchMedia(width) {
    return (query) => ({
      matches: mediaQuery.match(query, {
        width,
      }),
      addListener: () => {},
      removeListener: () => {},
    });
  }
  
  describe('MyTests', () => {
    beforeAll(() => {
      window.matchMedia = createMatchMedia(window.innerWidth);
    });
  });
  

  0 (chức năng [tùy chọn]). Bạn có thể cung cấp triển khai matchMedia của riêng mình. Điều này có thể được sử dụng để xử lý cửa sổ nội dung khung nội tuyến

• import mediaQuery from 'css-mediaquery';
  
  function createMatchMedia(width) {
    return (query) => ({
      matches: mediaQuery.match(query, {
        width,
      }),
      addListener: () => {},
      removeListener: () => {},
    });
  }
  
  describe('MyTests', () => {
    beforeAll(() => {
      window.matchMedia = createMatchMedia(window.innerWidth);
    });
  });
  

  1 (bool [tùy chọn]). Mặc định là false. Để thực hiện hydrat hóa phía máy chủ, hook cần kết xuất hai lần. Lần đầu tiên với false, giá trị của máy chủ và lần thứ hai với giá trị đã giải quyết. Chu kỳ kết xuất vượt qua kép này đi kèm với một nhược điểm. nó chậm hơn. Bạn có thể đặt tùy chọn này thành

  import useMediaQuery from '@mui/material/useMediaQuery';
  
  function MyComponent() {
    const matches = useMediaQuery((theme) => theme.breakpoints.up('sm'));
  
    return {`theme.breakpoints.up('sm') matches: ${matches}`};
  }
  

  0 nếu bạn chỉ hiển thị phía máy khách

• import mediaQuery from 'css-mediaquery';
  
  function createMatchMedia(width) {
    return (query) => ({
      matches: mediaQuery.match(query, {
        width,
      }),
      addListener: () => {},
      removeListener: () => {},
    });
  }
  
  describe('MyTests', () => {
    beforeAll(() => {
      window.matchMedia = createMatchMedia(window.innerWidth);
    });
  });
  

  5 (chức năng [tùy chọn]). Bạn có thể cung cấp triển khai matchMedia của riêng mình trong một

Ghi chú. Bạn có thể thay đổi các tùy chọn mặc định bằng tính năng của chủ đề bằng phím

import mediaQuery from 'css-mediaquery';

function createMatchMedia(width) {
  return (query) => ({
    matches: mediaQuery.match(query, {
      width,
    }),
    addListener: () => {},
    removeListener: () => {},
  });
}

describe('MyTests', () => {
  beforeAll(() => {
    window.matchMedia = createMatchMedia(window.innerWidth);
  });
});

7

trả lại

import mediaQuery from 'css-mediaquery';

function createMatchMedia(width) {
  return (query) => ({
    matches: mediaQuery.match(query, {
      width,
    }),
    addListener: () => {},
    removeListener: () => {},
  });
}

describe('MyTests', () => {
  beforeAll(() => {
    window.matchMedia = createMatchMedia(window.innerWidth);
  });
});

8. Kết quả khớp là

import useMediaQuery from '@mui/material/useMediaQuery';

function MyComponent() {
  const matches = useMediaQuery((theme) => theme.breakpoints.up('sm'));

  return {`theme.breakpoints.up('sm') matches: ${matches}`};
}

0 nếu tài liệu hiện khớp với truy vấn phương tiện và false khi không

Làm cách nào để nhập tệp CSS trong CSS?

@media được sử dụng để làm gì trong CSS?

Làm cách nào để sử dụng truy vấn phương tiện trong CSS cho tất cả các thiết bị?

Truy vấn phương tiện có sử dụng HTML hoặc CSS không?