material-ui 的媒体查询(手机端和PC端)

roseLin...

已于 2022-04-15 10:22:42 修改

阅读量1.3k

点赞数

CC 4.0 BY-SA版权

分类专栏： React 文章标签： react.js

于 2022-04-15 10:20:02 首次发布

本文链接：https://blog.csdn.net/qq_41547882/article/details/124188897

React 专栏收录该内容

8 篇文章

订阅专栏

本文介绍了React的useMediaQuery钩子，它用于实现CSS媒体查询，监听屏幕尺寸变化。通过这个钩子，开发者可以根据屏幕大小条件渲染组件，例如在本文示例中，展示了如何检查屏幕是否小于600px并据此调整UI。此外，还演示了如何判断设备是移动设备还是桌面设备，这对于创建响应式Web应用非常有用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

useMediaQuery是 React 的 CSS 媒体查询（Media queries）hook
它监听与 CSS 媒体查询的匹配的内容。
它允许根据查询的结果是否匹配来渲染组件

官网介绍：https://mui.com/zh/components/use-media-query/#main-content

简单的媒体查询

应该将媒体查询提供给 hook 作为第一个参数。媒体查询的字符串可以是任何有效的 CSS 媒体查询：

import * as React from 'react';
import useMediaQuery from '@mui/material/useMediaQuery';

export default function SimpleMediaQuery() {
  const matches = useMediaQuery('(min-width:600px)');

  return <span>{`(min-width:600px) matches: ${matches}`}</span>;
}

页面显示：

(min-width:600px) matches: true

★ 判断屏幕大小，来确定是手机端还是PC端：

const isMobile = useMediaQuery((theme) => theme.breakpoints.down('sm'));