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

问题描述

我有点困惑.到目前为止，我一直在使用 bootstrap 或 jquery mobile 来构建我的应用程序，它们都基于 jQuery.我听说了很多关于 ReactJs 的事情，我想在我的下一个应用程序中使用它.我正在寻找类似 bootstrap 的东西，但纯粹是用 ReactJs 编写的，随时可以使用.但直到现在我还没有发现任何真正方便的东西.首先我想使用 MaterializeCss，但我很快意识到它也是基于 jQuery 的.有一个纯粹用 ReactJs 编写的 material-ui，但没有 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.

所以直到现在我还没有找到合适的库来使用 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屋！