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

Question

我正在寻求构建一个断点为 1024 的响应式应用程序。当用户登录/注册时，将会回答一些问题。

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

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

有谁知道是否有任何样式框架可以处理类似的事情，或者有任何基于像素宽度的条件渲染的解决方法？

这将是一个基于 React 的应用程序。目前正在使用粉底进行造型。

谢谢!!

Answer 1

您可以使用设置 display: none 的 CSS 媒体查询来为不同大小创建断点。或者您可以使用React Responsive library基于媒体查询渲染 React 组件。

css 媒体查询示例(将其插入 .css 文件并将其包含到您的应用程序中):

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

react 响应示例:

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