Question

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

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

Answer 1

这一切都归结为CSS。无论您使用的是vanilla 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

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

1 个答案: