Next.js + Tailwind CSS 移动端适配方案

前言

在使用 Next.js + Tailwind CSS 开发移动端项目时，需要考虑移动端适配问题。本文将介绍一个优雅的解决方案，帮助你轻松实现移动端响应式设计。

背景

Tailwind CSS 默认使用 rem 单位，这给我们提供了一个很好的切入点。通过动态设置 HTML 根节点的 font-size，我们可以实现完美的移动端适配。

实现

js 复制代码

const UI_WIDTH = 375;
const baseFontSize = 16;

function setRootFontSize() {
  const width = document.documentElement?.clientWidth;
  const fontSize = ((width / UI_WIDTH) * baseFontSize).toFixed(4);
  document.documentElement.style.fontSize = `${fontSize}px`;
}
setRootFontSize();
window.addEventListener('resize', setRootFontSize);

优化：解决页面闪烁

上面方案中存在一个明显的问题：页面加载时会出现闪烁现象。例如：

设备宽度为 430px
页面初始加载时使用默认的 16px 字体大小
JavaScript 执行后才会调整为计算后的字体大小
这个过程会导致页面内容的突然变化，造成闪烁

如何解决呢? 我们可以在 Next.js 的 layout.tsx 中提前注入计算逻辑,这样子在页面加载时,html 会提前设置根节点的 font-size, 避免页面闪烁。

tsx 复制代码

// layout.tsx
<head>
    <script
        dangerouslySetInnerHTML={{
        __html: `
            (function() {
            const UI_WIDTH = 375;
            const baseFontSize = 16;
            function setRootFontSize() {
                const width = document.documentElement?.clientWidth;
                cosnt fontSize = ((width / UI_WIDTH) * baseFontSize).toFixed(4);
                document.documentElement.style.fontSize = fontSize + 'px';
            }
            setRootFontSize();
            window.addEventListener('resize', setRootFontSize);
            })();
        `,
        }}
    />
</head>

总结

这套移动端适配方案具有以下优点：

实现简单，无需引入额外的库。
与Tailwind CSS 完美配合

如果觉得文章有帮助，欢迎点赞转发！