如何用react构建一个响应式网站

How to build a responsive website with ReactJs

本文关键字：一个 响应 网站 何用 react 构建      更新时间：2023-09-26

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

所以直到现在我还没有找到合适的lib来用ReactJs构建我的应用程序。你有什么建议吗?

这一切都归结为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>;
在你的style .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/

媒体查询的综合列表

相关文章：