如何根据设备大小渲染不同的组件？

Question

我正在寻找一个断点为1024的响应式应用程序。当用户登录/注册时，将有几个问题需要回答。

在移动设备上，这将一次在屏幕上呈现为一个问题。然后，用户将看到一个滑动过渡屏幕，将其移至下一个问题。

一旦超过断点，所有问题将同时显示在屏幕上。

有谁知道是否有任何样式框架可用于此类工作，或者是否存在基于像素宽度的条件渲染的变通办法？

这将是一个基于React的应用程序。当前使用基础进行样式设计。

谢谢！！

Answer 1

您可以使用设置display的CSS媒体查询：none来创建不同大小的断点。或者，您可以使用React Responsive库基于媒体查询来呈现React组件。

CSS媒体查询示例（将其插入.css文件并将其包含在您的应用中）：

//Any device with className .loginFeature below 1024px will not be displayed
@media (max-width: 1024px) {
  .loginFeature:{
    display: none;
  }
}

反应敏感示例：

<MediaQuery query="(max-device-width: 1024px)">
  //Insert any components/html here that you want rendered thats below 1024px
</MediaQuery>

Answer 2

对于您的 React 项目，请查看 react-responsive。使用它来导入一个名为 MediaQuery 的组件。MediaQuery 只会在满足您为其设置的条件时呈现其子组件。

安装：

yarn add react-responsive

将此行添加到您的项目以导入 MediaQuery：

import MediaQuery from "react-responsive";

然后使用 MediaQuery 有条件地呈现您的内容或您的案例问题：

<MediaQuery query=(min-width: 1024px)>
    <div className="question">
        ...
    </div>
</MediaQuery>

您可以在此处找到有关 react-responsive 的更多信息。