在 Next.js 中实现移动端适配-JavaScript中文网-JavaScript教程资源分享门户

随着移动设备的普及，越来越多的人使用手机访问网站。因此，为了给用户提供更好的体验，网站必须具备良好的移动端适配能力。在 Next.js 中，我们可以通过一些方法来实现移动端适配。本文将详细地介绍这些方法，并提供示例代码。

媒体查询

媒体查询是一种基于设备特征的条件查询语句，用于确定样式规则是否应用到某个特定的设备或设备区域。在 Next.js 中，我们可以使用媒体查询来实现不同设备尺寸下的样式调整。

使用 CSS 文件

我们可以在 CSS 文件中设置媒体查询。例如，在 styles.css 文件中，我们可以设置以下媒体查询：

// javascriptcn.com 代码示例
@media only screen and (max-width: 600px) {
  body {
    background-color: red;
  }
}

@media only screen and (min-width: 601px) and (max-width: 1024px) {
  body {
    background-color: green;
  }
}

@media only screen and (min-width: 1025px) {
  body {
    background-color: blue;
  }
}

上面的代码设置了三个不同的媒体查询。当设备宽度小于等于 600px 时，背景色为红色；当设备宽度在 601px 到 1024px 之间时，背景色为绿色；当设备宽度大于等于 1025px 时，背景色为蓝色。

使用 css-in-js

在 Next.js 中，我们可以使用 css-in-js 的方式设置媒体查询。例如，在 styles.js 文件中，我们可以设置以下媒体查询：

// javascriptcn.com 代码示例
import css from "styled-jsx/css";

const styles = css`
  @media only screen and (max-width: 600px) {
    body {
      background-color: red;
    }
  }

  @media only screen and (min-width: 601px) and (max-width: 1024px) {
    body {
      background-color: green;
    }
  }

  @media only screen and (min-width: 1025px) {
    body {
      background-color: blue;
    }
  }
`;

export default styles;

上面的代码使用了 styled-jsx 来实现 css-in-js。当设备宽度小于等于 600px 时，背景色为红色；当设备宽度在 601px 到 1024px 之间时，背景色为绿色；当设备宽度大于等于 1025px 时，背景色为蓝色。

使用 CSS 单位

在移动端适配中，合适的 CSS 单位选择也非常重要。下面列举几种常用的 CSS 单位。

rem

rem 的大小是相对于根元素的 font-size。在 Next.js 中，我们可以在 _document.js 文件中设置根元素的 font-size。例如：

// javascriptcn.com 代码示例
import Document, { Html, Head, Main, NextScript } from "next/document";

export default class MyDocument extends Document {
  static async getInitialProps(ctx) {
    const initialProps = await Document.getInitialProps(ctx);
    return { ...initialProps };
  }

  render() {
    return (
      <Html>
        <Head />
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
}

MyDocument.getInitialProps = async (ctx) => {
  const originalRenderPage = ctx.renderPage;

  ctx.renderPage = () =>
    originalRenderPage({
      enhanceApp: (App) => (props) =>
        // eslint-disable-next-line react/jsx-props-no-spreading
        <App {...props} />,
    });

  const initialProps = await Document.getInitialProps(ctx);

  // Set the font size to 16px
  return {
    ...initialProps,
    styles: (
      <>
        {initialProps.styles}
        <style>{`
          html {
            font-size: 16px;
          }
        `}</style>
      </>
    ),
  };
};

上面的代码设置了根元素的 font-size 为 16px。我们可以使用 rem 单位来设置样式。

body {
  font-size: 1rem;
}

上面的代码将 body 元素的字体大小设置为根元素的字体大小，即 16px。

vw 和 vh

vw 和 vh 分别表示视口宽度的百分比和视口高度的百分比。在 Next.js 中，我们可以使用这两个单位来设置样式。

body {
  font-size: 4vw;
  height: 50vh;
}

上面的代码将 body 元素的字体大小设置为视口宽度的 4%，将高度设置为视口高度的 50%。

使用第三方库

除了手动实现移动端适配以外，我们还可以使用第三方库来帮助我们完成这个任务。

antd-mobile

Ant Design 是一个非常成熟的 UI 库，而 Ant Design Mobile 则是 Ant Design 的移动端版本。它可以帮助我们快速构建一个适配移动端的网站。

首先，我们需要安装 antd-mobile：

npm install antd-mobile --save

然后，我们需要引入 antd-mobile 的样式文件：

import "antd-mobile/dist/antd-mobile.css";

最后，我们就可以在代码中使用 antd-mobile：

import { Button } from "antd-mobile";

function HomePage() {
  return <Button>Click me</Button>;
}

export default HomePage;

上面的代码展示了一个按钮组件。

总结

本文介绍了在 Next.js 中实现移动端适配的多种方法，包括使用媒体查询、使用合适的 CSS 单位和使用第三方库。这些方法可以帮助我们更好地适配移动端，提高用户体验。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/654b01c37d4982a6eb4f3f62