时间戳

首页 > 解决方案 > React 响应式媒体查询不变

node.js - React 响应式媒体查询不变

问题描述

我正在使用响应式响应来创建媒体查询，因此图像大小会发生变化。但是，它没有做我想要的。它将较大的第一张图像保留在屏幕上，并且不会按照我指定的规则切换到另一张图像。有没有不同的编码方式？

从“反应”中导入反应，{组件}；从“反应响应”导入 MediaQuery

class Name extends Component {

    render(){
        return(
          <>
            <div>
            <MediaQuery Nameimg={this.props.Nameimg} minWidth={900}>
            <img height="15vh" className="name_image" src={this.props.Nameimg} alt="name"/>
            </MediaQuery>
            <MediaQuery Nameimg={this.props.Nameimg} maxWidth={899}>
            <img height="8vh" className="name_image2" src={this.props.Nameimg} alt="name2"/>
            </MediaQuery>
          </div>
          </>
        )
    }
}
  export default Name;

标签： node.jsreactjsresponsive

解决方案

这是一个简单的修复，因此希望这对其他人也有用。但我相信它不起作用，因为您需要使用包定义的设置宽度https://github.com/contra/react-responsive/blob/master/src/mediaQuery.ts#L9

我使用了 1224 的 minWidth 和 maxWidth，效果很好。

推荐阅读