我如何使用 breakpoint.value

Question

我有一个网站来监控员工，我希望这个网站能够“响应”，这意味着它可以在所有设备上运行。

举个简单的例子：

如果你想对“sm, xs”屏幕做出响应，你可以通过这个指令来实现：

[theme.breakpoints.down('sm')]: {
            -------------
            //some css code
        }

但是我遇到了这个问题。问题是在浏览器上测试网站时。我们发现从“xs”到“sm”，是一组设备，分别是：

    Moto G4----> size:360
    Galaxy S5 ----> size:360
    Pixel2 ----> size:411
    etc

现在的问题是如何分别处理这些屏幕的每种类型， 即如何处理大小为“411”等的屏幕。

我试过这个：

  [theme.breakpoints.down(411)]: {
                -------------
                //some css code
            }

但它不起作用。

Answer 1

Dcoumentation

hotpink: {
  '@media (min-width:411px)': {
    color: 'hotpink',
  },
},

const MyComponent = () => {
  const classes = useStyles();

  return <div className={classes.hotpink}>hello</div>
}

如果您需要在组件内部监听媒体查询值，可以使用useMediaQuery。