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

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

相关推荐
袁煦丞2 分钟前
你的在线相册管理专家Piwigo:cpolar内网穿透实验室第487个成功挑战
前端·程序员·远程工作
꧁༺摩༒西༻꧂7 分钟前
Python生成日历导出Excel
java·前端·python
Mintopia1 小时前
计算机图形学的奇幻之旅:第三天探索
前端·javascript·计算机图形学
Mintopia1 小时前
Three.js 物理材质:打造 3D 世界的 “魔法皮肤”
前端·javascript·three.js
知识分享小能手2 小时前
Typescript学习教程,从入门到精通,TypeScript 泛型与类型操作详解(二)(17)
前端·javascript·学习·typescript·jquery·前端网页学习
stark张宇2 小时前
Web - Javascript 函数与DOM、BOM
前端
上海张律师2 小时前
组件截图sdk -- screenshot_hm介绍 ##三方SDK##
前端·harmonyos
lineo_2 小时前
抛弃陈旧写法,你的uniapp定义globalData的正确姿势(setup语法糖)
前端·javascript
spionbo2 小时前
Vue 结合 D3 实现可拖拽拓扑图的技术方案及具体应用实例解析
前端·javascript
GIS之路2 小时前
OpenLayers 图形交互编辑
前端