关于响应式设计，对比了 tailwindcss 和 bootstrap，大家觉得哪个比较好呢？
placeholder · 2023-06-05 12:52:13 +08:00 · 1919 次点击这是一个创建于 538 天前的主题，其中的信息可能已经有所发展或是发生改变。
还是有更好的方案呢？
tailwindcss 只提供了最小宽度的断点，分别是： 640px ， 768px ， 1024px ， 1280px ， 1536px ，
bootstrap 倒是最大和最小都能设置，提供的断点分别是： < 576px ，
= 576px ， = 768px ， = 992px ， = 1200px ， = 1400px ， 如果是高 dpi 设备，bootstrap 还推荐在上述尺寸的基础上，减去 0.02px 来更精细的控制。
另外，针对于移动端的浏览器，tailwindcss 的 h-screen 总是会出现滚动栏，这一点如何解决。
前端太难了，我想白嫖。
9 条回复
 |
1
placeholder OP tmd V2EX 的格式控制真难啊
|
 |
2
heishu 2023-06-05 13:22:38 +08:00
没记错的话 tailwindcss 也是可以提供自定义宽度断点的吧
|
 |
3
dengqing 2023-06-05 14:24:57 +08:00 via iPhone
我选 unocss
|
 |
4
dfkjgklfdjg 2023-06-05 14:41:23 +08:00  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) |
 |
5
x77 2023-06-05 14:54:21 +08:00
Bootstrap 成熟、高效并且对响应式支持得非常好，不过这个离前端框架有点远，或者看着比较原始，因为 Bootstrap 库提供的是最底层的 JS+SCSS/CSS ，也没见官方提供啥开放工具，如果精通 HTML+JS+CSS 开发那还是很不错的选择。
|
|
6
placeholder OP |
|
7
placeholder OP @x77 好的，了解了
|
|
8
dfkjgklfdjg 2023-06-05 15:52:26 +08:00
@placeholder #6 ，所以如果你是想使用一些复制粘贴就可用的 UI 组件，那么就是使用 `DaisyUI` 这样的 UI 库，如果你考虑使用 `Tailwind` 话。
如果单纯是断点控制或者一些原子类样式。我也是推荐 `Tailwind` 的而不是 `Bootstrap` ，虽然 BS 可以通过单独引入 `bootstrap-grid.min.css` 使用栅格布局，但可自定义的能力差距还是比较大的。 而且 `BS v4x` 之前的版本是需要提前引入 `jQuery` 的，在现代的前端框架下就会显得比较多余。如果是一些展示性项目，那么用什么技术栈倒是无所谓了。 |
|
9
placeholder OP @dfkjgklfdjg 好的，学习了，感谢。
|
Select Language