Question

因此，我有一个屏幕，该屏幕将根据某些媒体查询而变化，该屏幕由通用样式的组件组成，当我需要特定功能时，我将该组件与屏幕上的组件一起插入，某些属性正在定位和或高度/宽度。

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


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以及根据屏幕尺寸更改边距？

Answer 1

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

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

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

尝试使用内联

1 个答案: