使用 React 和 Styled-Components 创建响应式和自适应布局

怎么了，技术人员！

如今，为了创建网站和网络应用程序，我们需要关注很多设备和屏幕尺寸。

通常情况下，UI 专业人员会创建一个适用于 1440px 宽度设备屏幕的精美布局，然后我们开始以固定像素大小构建该布局。如果我们尝试在不同的屏幕上渲染该布局，这可能会变得有点奇怪。那么字体怎么办呢？

我将在这里描述一个我曾经用过的方法。实现响应式和自适应布局的方法有很多，我将展示另一种方法。

让我们整理一些概念和先前的知识：

响应式布局会根据用户的屏幕尺寸进行自适应。它们不会改变元素的位置，只是适配屏幕。
自适应布局也会根据屏幕尺寸进行自适应，但元素会根据屏幕尺寸使用媒体查询调整位置以适应屏幕尺寸。

我会使用 ReactJS 和 Styled-Component。我想你应该已经了解它们了。如果你想了解这些库，可以在 dev.to 上搜索，你会学到很多！不过，如果你愿意，也可以将它与 SCSS 或 SASS 一起使用。

我将使用creact-react-app来搭建一个新项目，无需设置 Webpack 和其他工具。您可以自行配置项目或使用 CRA。

那么，我们开始吧！

让我们开始使用create_react_app创建项目。
之后，进入项目文件夹，安装styled-component作为项目依赖项。清理src文件夹，只保留 App.js 和 index.js 文件。删除其他文件，并记住移除所有已删除文件的引用。

好的，现在让我们检查一下我们将要创建的设计： 我们的 UI 将移动设备的字体大小设置为 24px，平板电脑的字体大小设置为 18px，网络的字体大小设置为 16px。

作为参考，移动设备的宽度为 320px，平板电脑的宽度为 720px，桌面设备的宽度从 1024px 开始。

CSS 重置和全局配置：

在src文件夹中，我们创建另一个名为styled -component lib 的文件夹，并在其中创建一个名为 global.js 的文件。我们将在这里使用styled-component lib 来创建全局样式。代码如下：

import { createGlobalStyle } from "styled-components";
import px2vw from "../utils/px2vw";

export const Global = createGlobalStyle`
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  :root {
      font-size: ${px2vw(24)};

      @media (min-width: 768px) {
        font-size: ${px2vw(18)};
      }

      @media (min-width: 1024px) {
        font-size: ${px2vw(16)};
      }
    }
`;

export default Global;

我们在这里所做的是重置一些 CSS 属性并使用我们将使用的字体大小定义我们的 HTML根。

我导入了一个名为px2vw的函数。我们将在下面创建它。此函数将像素转换为视口宽度。
由于我们的布局是响应式的，我们需要它适应所有屏幕尺寸，我们将使用视口大小来实现这一点。

出于同样的原因，我们也会使用该函数：如果元素将调整大小以适应屏幕，那么字体也将调整大小。

我决定不使用视口高度，因为通常我们处理的是屏幕宽度而不是屏幕高度，而且我在使用视口高度开发智能电视时遇到了另一个问题。我会在其他机会告诉你。

px2vw 函数：

让我们创建我们的函数。在src文件夹中，创建一个名为utils的新文件夹，并在utils文件夹中创建一个名为 px2vw.js 的文件：让我们检查一下代码：

const px2vw = (size, width = 1440) => `${(size / width) * 100}vw`;

export default px2vw;

对于此功能，由于布局的原因，宽度的默认值为 1440px，但如果您想使用其他值或执行更通用的功能，请随意。

为我们的项目创建一个页面。

现在，让我们创建一个页面来展示我们的布局。
在src文件夹中，创建一个名为pages的文件夹，并在其中创建一个名为Home 的文件夹。在Home
文件夹中，我们将创建两个文件。我们将分别用于样式组件和逻辑组件。

第一个是HomeStyles.js文件。代码如下：

import styled from "styled-components";
import px2vw from "../../utils/px2vw";

export const Container = styled.div`
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin: ${px2vw(32)};
  max-width: 100%;

  @media (min-width: 1024px) {
    flex-wrap: nowrap;
  }
`;

export const Box = styled.div`
  display: flex;
  width: ${px2vw(320, 320)};
  min-height: ${px2vw(200, 320)};
  flex-direction: column;
  padding: ${px2vw(20)};
  margin: ${px2vw(20)};
  background-color: ${props => props.bgColor};
  height: 100%;

  @media (min-width: 768px) {
    width: ${px2vw(320, 768)};
    min-height: ${px2vw(200, 768)};
    height: 100%;
  }

  @media (min-width: 1024px) {
    width: ${px2vw(500)};
    min-height: ${px2vw(300)};
    height: 100%;
  }
`;

export const BoxTitle = styled.h3`
  color: #333;
  font-size: 2rem;
  text-align: center;

  @media (min-width: 1024px) {
    font-size: 1.5rem;
  }
`;

export const BoxText = styled.p`
  margin-top: ${px2vw(20)};
  color: #666;
  font-size: 1.5rem;

  @media (min-width: 1024px) {
    font-size: 1rem;
  }
`;

我们已经构建了表示层。如果您注意到，我还在上面的代码中添加了一些文本样式来管理字体大小的变化。
当我们为其他屏幕尺寸调用 px2vw 函数时，我们将屏幕尺寸作为参数：min-height: ${px2vw(200, 320)};

我还使用了媒体查询来使我们的布局既自适应又响应式。这意味着，根据屏幕尺寸，框将根据我们的示例布局调整大小。

对于每个框，我给出了一个 bgColor 属性来控制每个框的颜色。

现在，让我们构建逻辑层。我们将创建一个Home.js文件，如下所示：

import React from "react";

import { Container, Box, BoxTitle, BoxText } from "./HomeStyles";

export default function Home({ boxData }) {
  return (
    <Container>
      {boxData.map(box => (
        <Box key={box.id} bgColor={box.bgColor}>
          <BoxTitle>{box.title}</BoxTitle>
          <BoxText>{box.text}</BoxText>
        </Box>
      ))}
    </Container>
  );
}

现在，为了完成，我们需要将home.js导入到App.js：

import React from "react";

import Global from "./styles/global";

import Home from "./pages/Home/Home";

const lorem =
  "Lorem, ipsum dolor sit amet consectetur adipisicing elit. Laboriosam, sed iure blanditiis voluptatum nulla quidem minus quam tempora obcaecati necessitatibus inventore! Vitae totam quam pariatur facilis fugit maxime adipisci eaque.";

const data = [
  {
    id: Math.random(),
    title: "Box titulo 1",
    text: lorem,
    bgColor: "#D5CAFA"
  },
  {
    id: Math.random(),
    title: "Box titulo 2",
    text: lorem,
    bgColor: "#EDA9A9"
  },
  {
    id: Math.random(),
    title: "Box titulo 3",
    text: lorem,
    bgColor: "#F2EE8D"
  },
  {
    id: Math.random(),
    title: "Box titulo 4",
    text: lorem,
    bgColor: "#9FEACD"
  }
];

function App() {
  return (
    <>
      <Global />
      <Home boxData={data} />
    </>
  );
}

export default App;

好了！现在，让我们用npm run start或yarn start运行项目，看看调整屏幕大小的结果。来看看吧：

这只是流体、响应和自适应布局的另一种方法。

如果您喜欢我的文章，或者有任何建议或评论，请在下方评论区告诉我。对我来说，不断进步和改进非常重要。
整个项目的代码可以在 Github 上找到，点击此处即可。欢迎在LinkedIn
上添加我，让我们一起分享想法！

文章来源：https://dev.to/carloscne/creating-responsive-and-adaptive-layouts-with-react-and-styled-components-1ghi