javascript - 如何使用 ReactJs 构建响应式网站

Question

已结束。此问题正在寻求书籍、工具、软件库等的推荐。它不满足 Stack Overflow guidelines 。目前不接受答案。

---

我们不允许提出寻求书籍、工具、软件库等推荐的问题。您可以编辑问题，以便用事实和引文来回答。

已关闭 7 年前。

Improve this question

我有点困惑。到目前为止，我一直在使用 bootstrap 或 jquery mobile 来构建基于 jQuery 的应用程序。我听说过很多关于 ReactJs 的事情，我想将它用于我的下一个应用程序。我正在寻找类似 bootstrap 的东西，但纯粹是用 ReactJs 编写的并且可以使用。但到目前为止我还没有发现任何真正方便的东西。首先，我想使用 MaterializeCss，但我很快意识到它也是基于 jQuery 的。有纯粹用ReactJs编写的material-ui，但没有CDN，它迫使我使用第三个工具来构建你的应用程序javascript文件。最后我找到了 muicss，但这个似乎还处于非常早期的阶段。

所以到目前为止，我还没有找到合适的库来使用 ReactJs 构建我的应用程序。您有什么建议吗？

Answer 1

这一切都归结于 CSS。无论您使用的是普通 CSS、SCSS、LESS 还是 CSS-in-JS，您都希望使用 CSS 选择器来定位您的组件，以适应分辨率的变化。

这是一个基本示例:

// ./foo.js
import React from "react";
import "./styles.css";

// Either as a Class
export default class FooClass extends React.Component {
  render() {
    return <div className="foo">Foo</div>;
  }
}

// Or as a function
export default FooFunction = (props) => <div className="foo">Foo</div>;

在你的 styles.css 中:

.foo {
  background-color: red;
  width: 100%;
  margin: 0 auto;

  /* Small Devices, Tablets */
  @media only screen and (min-width : 768px) {
    width: 75%;
    background-color: green;
  }

  /* Medium Devices, Desktops */
  @media only screen and (min-width : 992px) {
    width: 50%;
    background-color: pink;
  }
}

上述样式采用移动优先方法，这意味着默认类声明提供了元素在最小目标屏幕上的外观。这些移动样式将被后续媒体查询覆盖。多年来，这些直接位于 CSS 类下的“内联”媒体查询已成为我最喜欢的组织响应式样式的方式。

以下是一些响应式设计资源:

https://css-tricks.com/nine-basic-principles-responsive-web-design/

A comprehensive list of Media Queries