React Responsive 媒体查询不生效 图片无法按规则切换如何解决？

问题原因 #

• 核心原因大概率是缺少移动端适配的viewport元标签，导致移动设备的视口宽度被默认设置为桌面端宽度，始终命中minWidth=900的查询规则，所以一直显示大尺寸图片。你需要在项目HTML入口的<head>标签内添加如下代码：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

• 你的代码中给MediaQuery组件传递的Nameimg是无效自定义属性，不会影响功能，但属于冗余代码可以删除。

正确实现方式 #

方式1：修复react-responsive写法 #

把媒体查询规则统一放在query属性中，逻辑更清晰，避免props解析错误：

import React, {Component} from 'react';
import MediaQuery from 'react-responsive'

class Name extends Component {
    render(){
        return(
          <div>
            {/* 宽度≥900px时显示的图片 */}
            <MediaQuery query="(min-width: 900px)">
              <img height="15vh" className="name_image" src={this.props.Nameimg} alt="name"/>
            </MediaQuery>
            {/* 宽度≤899px时显示的图片 */}
            <MediaQuery query="(max-width: 899px)">
              <img height="8vh" className="name_image2" src={this.props.Nameimg} alt="name2"/>
            </MediaQuery>
          </div>
        )
    }
}
export default Name;

方式2：用原生CSS实现（更推荐，无需第三方依赖） #

这种纯样式的响应式需求完全可以用CSS实现，性能更好，逻辑更简洁：
JSX部分只需要保留单个img标签：

import React, {Component} from 'react';

class Name extends Component {
    render(){
        return(
          <div>
            <img className="name_image" src={this.props.Nameimg} alt="name"/>
          </div>
        )
    }
}
export default Name;

CSS部分添加媒体查询：

.name_image {
  height: 15vh;
}
/* 宽度≤899px时覆盖高度规则 */
@media (max-width: 899px) {
  .name_image {
    height: 8vh;
  }
}

方式3：用HTML原生picture元素实现 #

如果后续需要针对不同尺寸加载不同分辨率的图片源，用原生<picture>标签是最标准的语义化实现：

import React, {Component} from 'react';

class Name extends Component {
    render(){
        return(
          <div>
            <picture>
              {/* 宽度≥900px时用的资源，这里如果有大分辨率图可以替换src */}
              <source media="(min-width: 900px)" srcSet={this.props.Nameimg} />
              {/* 默认 fallback 资源 */}
              <img className="name_image" src={this.props.Nameimg} alt="name" />
            </picture>
          </div>
        )
    }
}
export default Name;

CSS配合设置高度：

.name_image {
  height: 15vh;
}
@media (max-width: 899px) {
  .name_image {
    height: 8vh;
  }
}

内容的提问来源于stack exchange，提问作者Elizabeth