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 完美配合

如果觉得文章有帮助,欢迎点赞转发!

相关推荐
江沉晚呤时23 分钟前
深入解析 .NET Kestrel:高性能 Web 服务器的架构与最佳实践
服务器·前端·.net
264玫瑰资源库1 小时前
网狐旗舰大联盟组件源码私测笔记:结构分层、UI重构与本地实操全流程
java·前端·数据库·笔记·ui·重构
qq_589568101 小时前
Electron学习+打包
前端·javascript·electron
小星jeff1 小时前
rails 8 CSS不起效问题解决
前端·css
二川bro2 小时前
前端实现商品放大镜效果(Vue3完整实现)
前端
苏小夕夕3 小时前
大数据应用开发和项目实战-Seaborn
大数据·前端
大G哥3 小时前
用 Java 和 DL4J 实现验证码识别系统
java·linux·开发语言·前端·python
源码方舟4 小时前
【HTML5】轮播图的实现方式一
前端·javascript·css·html·html5
源码方舟4 小时前
【HTML5】老式放映机原理-实现图片无缝滚动
前端·javascript·css·html·css3·html5
梦想与想象-广州大智汇4 小时前
普通 html 项目引入 tailwindcss
前端·html·tailwindcss