如何使用ReactJs构建响应式网站 [英] How to build a responsive website with ReactJs

问题描述

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

I am a bit confused. Until now I was using bootstrap or jquery mobile to build my application both base on jQuery. I heard a lot about ReactJs and I would like to use it for my next application. I am searching for something like bootstrap but purely written with ReactJs and ready to use. But until now I didn't found anything really convenient. First I was thinking to use MaterializeCss but I quickly realize that it was base as well on jQuery. There is material-ui purely written with ReactJs but there is no CDN and it oblige me to use third tool to build your app javascript files. Finally I found muicss but this one seem to be in a very early stage.

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

So till now I didn't found the right lib to build my app with ReactJs. Do you have any suggestion?

推荐答案

这一切都归结为CSS。无论您使用的是vanilla CSS，SCSS，LESS还是CSS-in-JS，您都希望使用CSS选择器来定位组件，以便适应分辨率更改。

It all comes down to CSS. Regardless of whether you are using vanilla CSS, SCSS, LESS, or CSS-in-JS, you're wanting to target your components with CSS selectors that allow you to adapt to resolution changes.

这是一个基本的例子：

// ./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中：

And in your 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类下的这些内联媒体查询已经成为我组织我的响应式样式的最佳方式。

The styles above are applied in a mobile-first approach, meaning that the default class declaration is provided with how the element will look on the smallest screen targeted. Those mobile styles will be overridden by the subsequent media queries. Over the years, these "inline" media queries directly under the CSS class have become my favorite way to organize my responsive styles.

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

Here are some responsive design resources:

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

媒体查询的完整列表

这篇关于如何使用ReactJs构建响应式网站的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！