V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
bruceewoo
V2EX  ›  Node.js

关于 Nextjs 移动端适配的问题

  •  
  •   bruceewoo · 239 天前 · 1855 次点击
    这是一个创建于 239 天前的主题,其中的信息可能已经有所发展或是发生改变。

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

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

    8 条回复    2024-04-30 11:22:43 +08:00
    xiaoqidev
        1
    xiaoqidev  
       239 天前
    提供一个线上无效的示例链接看看呢
    zhhanging
        2
    zhhanging  
       239 天前
    在你的网站上我没看到哪个元素有 block md:hidden
    dudubaba
        3
    dudubaba  
       239 天前
    盲猜样式层级问题,试试 block md:hidden!
    colorcat
        4
    colorcat  
       239 天前
    tailwind.config.ts 配置
    {
    important: true,
    }
    YouMoeYi
        5
    YouMoeYi  
       238 天前
    好奇书源
    vvong
        6
    vvong  
       238 天前
    在线中译英么 搞不定上下文的问题吧 而且你这样的翻译接口容易被刷啊 api 翻译接口也有频率限制
    chnwillliu
        7
    chnwillliu  
       238 天前 via Android
    tailwind 是 mobile first 的策略,没有前缀的是 apply 所有屏幕,md 是中宽度及以上更宽的屏幕。block md:hidden 的意思是默认 display block md 及以上 hidden 。

    OP 有可能搞反了。
    vczyh
        8
    vczyh  
       238 天前
    hidden md:block 默认隐藏,超过 md 显示
    block md:hidden 默认显示,超过 md 隐藏

    应该这样理解吧?
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   3133 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 21ms · UTC 12:41 · PVG 20:41 · LAX 04:41 · JFK 07:41
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.