如何使用CSS制作响应式UI？

Question

如何使用

css

使以下 UI 响应。

 <Text className="w-100 mt-0 align-self-center">
     Lorem ipsum  Lorem ipsum  Lorem ipsum<span>{'$200'}</span>
    </Text>                                                                                         

    <Text className="w-100 mt-0 align-self-center">
    Lorem ipsum<span>{'$100'}</span>Lorem ipsum
    </Text>

    <Text className="w-100 mt-0 align-self-center">
     {"Lorem Ipsum has been the industry's standard dummy text ever since the 1500s"}
     <Button
      className="link-button"
      variant={VARIANTS.LINK}
      >
     <ButtonText>{'here'}</ButtonText>
     </Button>
     </Text>
     

Text

和

Button

的样式如下

const Text = styled.div`
  font-family: ${(props) => props.theme.font.base};
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 24px;
  color: ${(props) => props.theme.colors.text.secondary};
  a,
  button {
    text-decoration: underline currentColor;
    &:hover:not(:disabled) {
      text-decoration-color: transparent;
    }
  }
  span {
    font-weight: 600;
    white-space: nowrap;
    @media screen and (max-width: ${breakpoints.desktop}px) and (min-width: ${breakpoints.laptopL}px) {
      margin-top: 25px !important;
    }
    @media screen and (max-width: ${breakpoints.tablet}px) {
      margin-top: 25px !important;
    }
  }
`;

目前，这就是我在响应式中得到的结果，用户界面正在崩溃。如何重写样式以在响应式视图中工作？非常感谢任何帮助。

Answer 1

Bootstrap is a good solution for making a responsive UI.
HTML:-
<div class="align">
    <div class="w-100 mt-1 responsive">
        <span>Lorem ipsum</span>
        <span>Lorem ipsum</span>
        <span>Lorem ipsum</span>
        <span>$ 200</span>
    </div>                                                                                         
    
    <div class="w-100 mt-1 responsive">
        <span>Lorem ipsum</span>
        <span>$ 100</span>
        <span>Lorem ipsum</span>
        <span></span>
    </div>
    
    <div class="w-100 mt-1 responsive">
        <span> Ipsum has been the industry's standard dummy text ever since the 1500s</span>
        <a class="link-button"> here </a>
        <span></span>
        <span></span>
    </div>
</div>

CSS:-
.align {
    color: #958989;
    font-size: 15px;
    font-weight: 500;
}
.responsive {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-around;
}
span , a {
    width: 10em;
}


Note:- You can use bootstrap classes directly in html file also.