如何通过Material UI库针对不同设备使用指定媒体查询设置样式

要在Material UI的样式系统中为不同设备单独配置高DPI屏幕的样式，核心是利用样式对象的嵌套媒体查询特性，把高DPI查询规则嵌入到对应设备的断点样式中。以下是具体实现方案：

步骤1：定义高DPI媒体查询常量 #

先把重复的高DPI查询语句抽成常量，方便复用和维护：

const HIGH_DPI_MEDIA_QUERY = '@media (min-device-pixel-ratio: 2), (min-resolution: 192dpi), (min-resolution: 2dppx)';

步骤2：整合到样式定义中 #

根据你提供的现有代码，我们可以把不同设备的1x图和对应高DPI的2x图嵌套到样式对象里，同时结合设备宽度断点实现分设备适配：

基础版（直接用像素断点） #

const HIGH_DPI_MEDIA_QUERY = '@media (min-device-pixel-ratio: 2), (min-resolution: 192dpi), (min-resolution: 2dppx)';

const styled = {
  animal: {
    // 默认移动端1x图
    backgroundImage: `url(${require('../../images/background/bg-mobile@1x.png')}), url(${require('../../images/animal/animal-mobile@1x.png')})`,
    
    // 移动端高DPI屏幕显示2x图
    [HIGH_DPI_MEDIA_QUERY]: {
      backgroundImage: `url(${require('../../images/background/bg-mobile@2x.png')}), url(${require('../../images/animal/animal-mobile@2x.png')})`,
    },
    
    // 平板断点（600px为Material UI默认md断点）
    '@media (min-width: 600px)': {
      backgroundImage: `url(${require('../../images/background/bg-tablet@1x.png')}), url(${require('../../images/animal/animal-tablet@1x.png')})`,
      
      // 平板高DPI屏幕显示2x图
      [HIGH_DPI_MEDIA_QUERY]: {
        backgroundImage: `url(${require('../../images/background/bg-tablet@2x.png')}), url(${require('../../images/animal/animal-tablet@2x.png')})`,
      },
    },
    
    // 桌面断点（1200px为Material UI默认lg断点）
    '@media (min-width: 1200px)': {
      backgroundImage: `url(${require('../../images/background/bg-desktop@1x.png')}), url(${require('../../images/animal/animal-desktop@1x.png')})`,
      
      // 桌面高DPI屏幕显示2x图
      [HIGH_DPI_MEDIA_QUERY]: {
        backgroundImage: `url(${require('../../images/background/bg-desktop@2x.png')}), url(${require('../../images/animal/animal-desktop@2x.png')})`,
      },
    },
  },
};

主题适配版（用Material UI主题断点） #

如果你的项目配置了Material UI主题，建议用主题内置的断点，保证全局断点一致性：

import { makeStyles } from '@mui/styles';

const HIGH_DPI_MEDIA_QUERY = '@media (min-device-pixel-ratio: 2), (min-resolution: 192dpi), (min-resolution: 2dppx)';

const useStyles = makeStyles((theme) => ({
  animal: {
    backgroundImage: `url(${require('../../images/background/bg-mobile@1x.png')}), url(${require('../../images/animal/animal-mobile@1x.png')})`,
    
    [HIGH_DPI_MEDIA_QUERY]: {
      backgroundImage: `url(${require('../../images/background/bg-mobile@2x.png')}), url(${require('../../images/animal/animal-mobile@2x.png')})`,
    },
    
    // 平板断点（对应主题中的md断点）
    [theme.breakpoints.up('md')]: {
      backgroundImage: `url(${require('../../images/background/bg-tablet@1x.png')}), url(${require('../../images/animal/animal-tablet@1x.png')})`,
      
      [HIGH_DPI_MEDIA_QUERY]: {
        backgroundImage: `url(${require('../../images/background/bg-tablet@2x.png')}), url(${require('../../images/animal/animal-tablet@2x.png')})`,
      },
    },
    
    // 桌面断点（对应主题中的lg断点）
    [theme.breakpoints.up('lg')]: {
      backgroundImage: `url(${require('../../images/background/bg-desktop@1x.png')}), url(${require('../../images/animal/animal-desktop@1x.png')})`,
      
      [HIGH_DPI_MEDIA_QUERY]: {
        backgroundImage: `url(${require('../../images/background/bg-desktop@2x.png')}), url(${require('../../images/animal/animal-desktop@2x.png')})`,
      },
    },
  },
}));

原理说明 #

Material UI的样式系统支持在样式对象中嵌套任意媒体查询，包括设备宽度断点和高DPI查询。通过嵌套结构，我们可以实现：

• 在对应设备宽度范围内，普通DPI屏幕显示1x图
• 同一设备宽度下，高DPI屏幕自动切换为2x图

内容的提问来源于stack exchange，提问作者Дмитро Савченко