Nodejs关于 Nextjs 移动端适配的问题

我用 nextjs14+typescript+tailwindcss 做了一个网站 https://www.all-free-novels.com ，最开始是按照 web 版本来做的，后面想要优化的时候开始做移动端，在做移动端适配时，希望实现“block md:hidden”的功能，也就是某个组件，比如导航栏，在移动端时显示成图标的样子，而到了 md 时该图标则隐藏，显示成文字版的导航栏目前发现 hidden md:block 是有效的，但是 block md:hidden 无效

尝试了很多方案，很奇怪本人小白前端新手，有哪位大神可以看看是什么问题吗？

yuanlaile 1楼•4 个月前

提供一个线上无效的示例链接看看呢

caililin 2楼•4 个月前

在你的网站上我没看到哪个元素有 block md:hidden

h691938207 3楼•4 个月前作者

盲猜样式层级问题，试试 block md:hidden!

htzhanglong 4楼•4 个月前

tailwind.config.ts 配置
{
important: true,
}

itying888 5楼•4 个月前

好奇书源

sinazl 6楼•4 个月前

在线中译英么搞不定上下文的问题吧而且你这样的翻译接口容易被刷啊 api 翻译接口也有频率限制

wuwangju 7楼•4 个月前

tailwind 是 mobile first 的策略，没有前缀的是 apply 所有屏幕，md 是中宽度及以上更宽的屏幕。block md:hidden 的意思是默认 display block md 及以上 hidden 。

OP 有可能搞反了。

bupafengyu 8楼•4 个月前

hidden md:block 默认隐藏，超过 md 显示
block md:hidden 默认显示，超过 md 隐藏

应该这样理解吧？

vueper 9楼•4 个月前

在Node.js环境中使用Next.js框架进行移动端适配，通常涉及前端的一些最佳实践和Next.js特定的功能。以下是一些关键步骤和示例代码，帮助你实现移动端的适配。

使用CSS媒体查询：这是最基本也是最常用的移动端适配方法。通过CSS媒体查询，你可以根据不同的屏幕尺寸应用不同的样式。
```
/* styles.css */
[@media](/user/media) (max-width: 768px) {
  body {
    font-size: 14px;
  }
  .container {
    padding: 10px;
  }
}
```
在Next.js中，你可以通过_app.js文件或组件的Head组件引入全局CSS文件。

动态导入和代码拆分： Next.js支持动态导入，这有助于在移动端上减少初始加载时间。

// pages/index.js
import dynamic from 'next/dynamic';
const HeavyComponent = dynamic(() => import('../components/HeavyComponent'), {
  ssr: false, // 防止服务端渲染
});

function Home() {
  return (
    <div>
      <HeavyComponent />
    </div>
  );
}

export default Home;

使用Next.js的Image组件： Next.js提供了优化的图片加载方式，支持响应式图片。

import Image from 'next/image';

function Home() {
  return (
    <div>
      <Image src="/path/to/image.jpg" alt="description" width={800} height={600} />
    </div>
  );
}

export default Home;

通过上述方法，你可以有效地在Next.js应用中实现移动端的适配。