如何使用 ReactJs 构建响应式网站 [关闭]

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