尝试使用内联时反应和样式组件的媒体查询问题答案

【问题标题】：Media query issue with react and styled-components while trying to use inline尝试使用内联时反应和样式组件的媒体查询问题
【发布时间】：2020-04-03 18:08:33
【问题描述】：

所以我有一个屏幕会根据一些媒体查询而改变，这个屏幕由通用样式的组件组成，当我需要一个特定的功能时，我将它与屏幕上的组件内联，其中一些属性是定位和或高度/宽度。

在为桌面屏幕设计后，我正在尝试实现移动屏幕。我会显示一些代码


type Props = {
  setDisplayScreen: Function,
};

const SignIn = ({ setDisplayScreen }: Props) => (
  <ScreenDiv>
    <ImageContainer>
      <ImageDiv bg={sideimage} src={sideimage} alt="logo" />
    </ImageContainer>
    <FormDiv>
      <Input style={{ marginTop: 44 }} placeholder="Username" />
      <Input style={{ marginTop: 44 }} placeholder="Password" />
      <PinkButton style={{ marginTop: 45, width: 82, cursor: 'pointer' }}>
        Sign in
      </PinkButton>
      <NunitoItalic18 style={{ marginTop: 60 }}>
        Forgot username or password
      </NunitoItalic18>
      <Nunito20
        style={{ marginTop: 45.8, cursor: 'pointer' }}
        onClick={() => setDisplayScreen('SignUpOptions')}
      >
        Don’t have an account? Sign up
      </Nunito20>
    </FormDiv>
  </ScreenDiv>
);

export default SignIn;

我的具体问题是如何根据屏幕尺寸更改图像的 url 以及根据屏幕尺寸的边距空间？

【问题讨论】：

标签： css reactjs styled-components

【解决方案1】：

您可以尝试添加一个 on resize 事件侦听器来更改您然后在组件中使用的变量

if (browserScreenSize === mobile) {
   //set margin and image for mobile
} else {
  //set margin and image for desktop
}

然后在您的组件中指定变量名而不是值

【讨论】：

我真的不明白该怎么做
1.添加事件侦听器以检查您是在移动设备上还是在桌面上stackoverflow.com/questions/18425688/… 2. 设置一个您将在调整大小时编辑的变量 let backgroundimg; if (mobile) { backgroundimg = 'url here' }else { backgroundimg = 'url here' } 3. 在你的组件中使用变量而不是 url