V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
V2EX 提问指南
placeholder
V2EX  ›  问与答

关于响应式设计,对比了 tailwindcss 和 bootstrap,大家觉得哪个比较好呢?

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

    还是有更好的方案呢?

    tailwindcss 只提供了最小宽度的断点,分别是: 640px , 768px , 1024px , 1280px , 1536px ,

    bootstrap 倒是最大和最小都能设置,提供的断点分别是: < 576px ,

    = 576px , = 768px , = 992px , = 1200px , = 1400px , 如果是高 dpi 设备,bootstrap 还推荐在上述尺寸的基础上,减去 0.02px 来更精细的控制。

    另外,针对于移动端的浏览器,tailwindcss 的 h-screen 总是会出现滚动栏,这一点如何解决。

    前端太难了,我想白嫖。

    placeholder
        1
    placeholder  
    OP
       327 天前
    tmd V2EX 的格式控制真难啊
    heishu
        2
    heishu  
       327 天前
    没记错的话 tailwindcss 也是可以提供自定义宽度断点的吧
    dengqing
        3
    dengqing  
       327 天前 via iPhone
    我选 unocss
    dfkjgklfdjg
        4
    dfkjgklfdjg  
       327 天前   ❤️ 1
    对比错了吧,不应该是 BS 对比 [DaisyUI]( https://daisyui.com/) 这种 UI 库吗?为啥会是对比的 Tailwind 。
    如果只是断点的话,Tailwind 的断点其实是可以配置的 👉 [Customizing Screens - Tailwind CSS]( https://tailwindcss.com/docs/screens)

    至于 `h-screen` 会出现滚动条是因为
    > According to developers.google the vh is always calculated as if the URL bar is hidden since Chrome version 56
    所以改用 `h-full` 就好了。这是古早之前我对于 `100vh` 的一个疑惑 👉 [移动端 body 高度为 100vh 时,实际高度超过了视窗高度?]( https://segmentfault.com/q/1010000020155101)
    x77
        5
    x77  
       327 天前
    Bootstrap 成熟、高效并且对响应式支持得非常好,不过这个离前端框架有点远,或者看着比较原始,因为 Bootstrap 库提供的是最底层的 JS+SCSS/CSS ,也没见官方提供啥开放工具,如果精通 HTML+JS+CSS 开发那还是很不错的选择。
    placeholder
        6
    placeholder  
    OP
       327 天前
    @dfkjgklfdjg 好的,感谢

    对比不对的问题可能是因为我不太懂吧
    placeholder
        7
    placeholder  
    OP
       327 天前
    @x77 好的,了解了
    dfkjgklfdjg
        8
    dfkjgklfdjg  
       326 天前
    @placeholder #6 ,所以如果你是想使用一些复制粘贴就可用的 UI 组件,那么就是使用 `DaisyUI` 这样的 UI 库,如果你考虑使用 `Tailwind` 话。
    如果单纯是断点控制或者一些原子类样式。我也是推荐 `Tailwind` 的而不是 `Bootstrap` ,虽然 BS 可以通过单独引入 `bootstrap-grid.min.css` 使用栅格布局,但可自定义的能力差距还是比较大的。

    而且 `BS v4x` 之前的版本是需要提前引入 `jQuery` 的,在现代的前端框架下就会显得比较多余。如果是一些展示性项目,那么用什么技术栈倒是无所谓了。
    placeholder
        9
    placeholder  
    OP
       326 天前
    @dfkjgklfdjg 好的,学习了,感谢。
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   2876 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 30ms · UTC 07:28 · PVG 15:28 · LAX 00:28 · JFK 03:28
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.