我有点困惑。到目前为止，我一直在使用 bootstrap 或 jquery mobile 来构建我的应用程序，它们都基于 jQuery。我听说了很多关于 ReactJs 的事情，我想在我的下一个应用程序中使用它。我正在寻找类似 bootstrap 的东西，但纯粹是用 ReactJs 编写的，随时可以使用。但直到现在我还没有发现任何真正方便的东西。首先我想使用 MaterializeCss，但我很快意识到它也是基于 jQuery 的。有一个纯粹用 ReactJs 编写的 material-ui，但没有 CDN，它迫使我使用第三个工具来构建您的应用程序 javascript 文件。最后我找到了 muicss，但这个似乎处于非常早期的阶段。
所以直到现在我还没有找到合适的库来使用 ReactJs 构建我的应用程序。你有什么建议吗？
这一切都归结为 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/