如何使用媒体请求通过材料UI库

Question

如何使用媒体请求

@media (min-device-pixel-ratio: 2), (min-resolution: 192dpi), (min-resolution: 2dppx)

通过材料UI库样式，每个设备分别使用

// '@media (min-device-pixel-ratio: 2), (min-resolution: 192dpi), (min-resolution: 2dppx)': `url(${require('../../images/background/[email protected]')}), url(${require('../../images/animal/[email protected]')})`,

const styled = {
 animal: {
  backgroundImage: {
   mobile: `url(${require('../../images/background/[email protected]')}), url(${require('../../images/animal/[email protected]')})`,
   tablet: `url(${require('../../images/background/[email protected]')}), url(${require('../../images/animal/[email protected]')})`,
   desktop: `url(${require('../../images/background/[email protected]')}), url(${require('../../images/animal/[email protected]')})`,
  },
 },
}

Answer 1

您可以使用

useMediaQuery

钩检测设备像素比或屏幕分辨率是否很高。

在这里，您可以使用

-Makestyle

：导入屏幕上的图像底

const useStyles = makeStyles((theme) => ({
  animal: {
    backgroundRepeat: 'no-repeat',
    backgroundSize: 'cover',
    backgroundImage: `url(${require('../../images/background/[email protected]')}), url(${require('../../images/animal/[email protected]')})`,
    [theme.breakpoints.up('sm')]: {
      backgroundImage: `url(${require('../../images/background/[email protected]')}), url(${require('../../images/animal/[email protected]')})`,
    },
    [theme.breakpoints.up('md')]: {
      backgroundImage: `url(${require('../../images/background/[email protected]')}), url(${require('../../images/animal/[email protected]')})`,
    },
    [theme.breakpoints.up('xl')]: {
      backgroundImage: `url(${require('../../images/background/[email protected]')}), url(${require('../../images/animal/animal-hd-desktop.png')})`,
    },
  },
}));

，根据

ratio

或screen分辨率有条件地采用样式。

function Test(props) {
  const classes = useStyles();
  const Screen = useMediaQuery(
    '(min-device-pixel-ratio: 2), (min-resolution: 192dpi), (min-resolution: 2dppx)',
  );

  return (
    <div
      className={classes.animal}
      style={{
        backgroundImage: Screen
          ? `url(${require('../../images/background/[email protected]')}), url(${require('../../images/animal/[email protected]')})`
          : " ",
      }}
    />
  );
}